CODEWITHSUNDEEP
javascriptcss
user1031947
user1031947

Reputation: 6664

Size image to container while maintaing aspect ratio in CSS?

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

Upvotes: 6

Views: 18733

Answers (4)

unloco
unloco

Reputation: 7320

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/

Upvotes: 0

iambriansreed
iambriansreed

Reputation: 22241

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

Upvotes: 11

imkost
imkost

Reputation: 8163

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>

Upvotes: 0

PlantTheIdea
PlantTheIdea

Reputation: 16359

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.

Upvotes: 2

Related Questions