Is there a way to ensure all the pictures in a table are the same size, orientation, and inline? Currently, my images vary in size and rotation. The CSS I have applied is styling only the first image differently from the rest. Any help is appreciated!
CSS
#pics {
margin-top: 8%;
}
#pics td {
height: 100px;
padding-top: .5em;
padding-bottom: 5em;
}
#pics img {
margin-left: 5%;
margin-right: 5%;
height: 90%;
border: 5px #72dbd4 solid;
transform: rotate(90deg);
display: inline;
}
#cliffPano {
width: 90%;
}
HTML
<table id="pics">
<tr>
<td><img src="blogPics/battleship.JPG" /></td>
<td><img src="blogPics/PHMemorial.JPG" /></td>
<td><img src="blogPics/roadToHana.JPG" /></td>
</tr>
<tr>
<td><img src="blogPics/hawaiiTree.jpg" /></td>
<td><img src="blogPics/hawaiiOcean.JPG" /></td>
<td><img src="blogPics/planeHawaii.JPG" /></td>
</tr>
<tr>
<td><img id="cliffPano" style="transform: rotate(0deg);"src="blogPics/cliffPano.jpg" /></td>
</tr>
</table>