How can I make images fit into a 200 pixel square box using CSS?

bounding-box, css, image, javascript

Solution

I set this up on my computer and it worked fine. After looking at your example page, the problem is because you've set the image to `display:block`. Either remove that rule from your general `img` rule (weird thing to set globally, anyway), or change the image rule you posted above to this:

div.images div.small img
{
    vertical-align: middle;
    max-width: 200px;
    max-height: 200px;
    display: -moz-inline-box; /* Firefox 2 */
    display: inline-block;
}

By default, the `img` element and other "replaced" elements (Flash, etc) are "inline-block" - this means they flow inline like text, but have a width and height.

Problem

I have a bunch of images which all fit into a 400px × 400px box (that is, one of their dimensions is 400px and the other is smaller). I would like to be able to, using CSS, but jquery/javascript if necessary, fit that image to a 200px by 200px box, so that two edges of the image touch the box, and there is a gap between the other two edges of the box. Aspect ratio must be maintained. My HTML is as follows: ``` <div class="small"> <img src="/images/photos/View.jpg" alt="View" /> </div> ``` And my CSS is: ``` 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 see a sample here. Unfortunately, my landscape images hug the top of the box, whereas I would like them to be centered. Also, I'm not sure of the wisenees of relying upon `max-width`/`max-height`. How can I center my images within these boxes?

Original source