Size image to container while maintaing aspect ratio in CSS?

Question

I have a bunch of images of different (unknown) dimensions.

I want to drop these images into a div and have them automatically conform to the dimensions of the div, while maintaining their aspect ratio.

In other words, if the image is wider than high, the width will be 100%, and the height will scale accordingly. If the image is higher than wide, the height will be 100%, and the width will scale accordingly.

Is there any way to do this in pure css?

Thanks

Answer 1

Using the css properties max-width and max-height on the image will get you where you need to be.

Fiddle

http://fiddle.jshell.net/sHAQ9/

HTML

<div>    
    <img src="http://dummyimage.com/200x300/000000/ffffff.png&text=tall%20image"/>
</div>
<div>    
    <img src="http://dummyimage.com/300x200/000000/ffffff.png&text=wide%20image"/>
</div>

CSS

div {
    width: 150px;
    height: 150px;    
    overflow: hidden;
    background: #ccc;
    margin: 10px;
    text-align: center;
    line-height: 150px;
}
div img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

Answer 2

I do this with my gallery setup:

.ScaledImg {
    max-width:100%:
    max-height:100%;
}

The img scales to fit the dimensions of its parent/container based on this, while maintaining its aspect ratio. I haven't tried this with anything other than imgs, but works well for me. No width or height declarations are needed.