I've included my code below and I am searching for the most effective method to use CSS to center an image both horizontally and vertically within a 300 by 300 pixel square. If the image is larger, it should be resized to fit within the square, while smaller images should be centered without stretching.
<table width="100%">
<tr>
<td><div class="300box"><img class="centeredimage" /></div></td>
<td><div class="300box"><img class="centeredimage" /></div></td>
<td><div class="300box"><img class="centeredimage" /></div></td>
</tr>
</table>
Here is my CSS:
.300box {
height: 300px;
width: 300px;
}
.centeredimage {
vertical-align: middle;
text-align: center;
}
I understand that the current approach might not be correct, hence I am looking for a more efficient solution. Each row in the table consists of three 300x300 pixel divs with centered images inside them.