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

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

• javascript
• css

4 Answers 4

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;
}

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.

Try this:

<style>
    .fit_image img {
        max-width: 100%;
        max-height: 100%;
    }
    .fit_image {
        width: 400px;
        height: 200px;
    }
</style>

<div class="fit_image">
     <img src="/path/to/image.jpg">
</div>

Based on @iambriansreed fiddle,
Use zoom on the image when it's smaller than the container

div img {
    zoom: 10;
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

http://fiddle.jshell.net/vcapr0k8/