I have a collection of images that all fit within a 400px × 400px box, with one dimension being 400px and the other smaller. I want to resize these images using CSS or jQuery/JavaScript if necessary, to fit into a 200px by 200px box. The goal is to have two edges of the image touch the box while leaving a gap between the other two edges, all while maintaining the aspect ratio.
Here is my HTML code:
<div class="small">
<img src="/images/photos/View.jpg" alt="View" />
</div>
And this is my CSS:
div.images div.small
{
width:200px;
height:200px;
line-height:200px;
text-align:center;
}
div.images div.small img
{
vertical-align:middle;
max-width:200px;
max-height:200px;
}
You can view an example here.
The issue I am facing is that my landscape images are aligned to the top of the box instead of being centered. Additionally, I am uncertain about relying on max-width/max-height. How can I ensure that my images are centered within these boxes?