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背景 - size：175px 160px;纵横比真的搞砸了造成这样的混乱：

是否有办法伸展的形象，以适应一个div？但是在某种程度上保持宽高比？我想要一个自动裁剪。

Answer 1

这应该工作（在支持background-size浏览器）：

background-size: 175px auto; 

您也可以尝试：

background-size: cover; 

或者：

background-size: contain; 

There's a good explanation on MDC.

Answer 2

是否需要成为背景图片？

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


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

Answer 3

可以使用background-size属性与contain值：

background-size: contain; 

这里是一个工作示例： https://jsfiddle.net/gusrodriguez/auuk97hf/1/

在上面的例子中，所述主体具有在后台拉伸图像。还有两个任意大小的div，以及另一个适合并保持宽高比的图像。