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.
This should work (in browsers which support background-size
):
background-size: 175px auto;
You could also try:
background-size: cover;
Or:
background-size: contain;