6

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

user1031947
  • 6,294
  • 16
  • 55
  • 88

4 Answers4

11

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;
}
iambriansreed
  • 21,935
  • 6
  • 63
  • 79
  • This works up until the image is 100% of its true size on one axis. Is there a way to size it beyond 100%? – user1031947 Mar 20 '13 at 18:16
  • This is not working when I have increased the size of div. see [link](http://fiddle.jshell.net/sHAQ9/30/). Is there any solution to stretch it to fit to width or height.? – hemkaran_raghav Dec 09 '13 at 05:49
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.

PlantTheIdea
  • 16,061
  • 5
  • 35
  • 40
0

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>
imkost
  • 8,033
  • 7
  • 29
  • 47
0

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/

unloco
  • 6,928
  • 2
  • 47
  • 58