CSS如何伸展以适应和保持纵横比？

Question

我有以下css:

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

这对应于这个HTML:

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

这导致了这个烂摊子:

如果我使用css3 background-size:175px 160px; 宽高比真的搞砸了,导致像这样的混乱:

有没有办法拉伸图像以适应div？但在保持纵横比的方式？我想要一个自动裁剪.

Answer 1

这应该工作(在支持的浏览器中background-size):

background-size: 175px auto;

你也可以尝试:

background-size: cover;

要么:

background-size: contain;

对MDC有一个很好的解释.

Answer 2

它需要是背景图像吗？

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


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