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，以及另一個適合並保持寬高比的圖像。