CSS how do you stretch to fit and maintain the aspect ratio?

Question

I have the following css:

.mod.left {
background-image: url("http://www.myimage.jpg");
display: block;
height: 160px;
overflow: hidden;
width: 175px;
}

That corresponds to this HTML:

<div class="mod left"></div>

It results in this mess:

if I use the css3 background-size: 175px 160px; The aspect ratio is really messed up resulting in a mess like this:

Is there a way to stretch an image to fit a div? But in a way in which the aspect ratio is maintained? I want an auto crop.

Sweetandsour

your example is working on firefox 6.0.2. the image is cropped with correct ratio. peace – Quintessence

Answer 1

This should work (in browsers which support background-size):

background-size: 175px auto;

You could also try:

background-size: cover;

Or:

background-size: contain;

There's a good explanation on MDC.

Bartie

Answer 2

Does it need to be a background image?

img{
width:300px;
height:auto;
}


<img src="your-photo.png">

Celsacelsius

Answer 3

You can use the background-size property with the contain value:

background-size: contain;

Here is a working example: https://jsfiddle.net/gusrodriguez/auuk97hf/1/

In the example above, the body has an stretched image in the background. Also there are two divs with arbitrary size, and with another image that fits and keep the aspect ratio.

Catalyst

Answer 4

You can use the CSS Object-fit property.

{
 height: 160px;
 width: 175px;
 object-fit: cover;
}

Object-fit can have the following values.

contain, cover, fill, none, scale-down. Please refer to above link for more info.

Kennedy

Answer 5

I found this method, if using an img not a background:

        min-width: 100%;
        max-width: 100%;
        min-height: 100%;
        max-height: 100%;
        object-fit: contain;

Vogeley