設置大小/長寬比的圖像，多數民衆贊成也響應

Question

我正在建立一個響應網站。在主頁上，我有許多文章的縮略圖應該在全尺寸桌面輸出上顯示爲230px * 115px。文章發佈商將上傳各種尺寸的圖像，而不需要特定的設置寬高比。

我目前只是有代碼來調整基於它的父容器的圖像的大小。寬度將是其父容器的100％，並且高度是自動的，並且將根據原始圖像的長寬比而變化。

.img { 
    width:100%; 
    height:auto!important; 
} 

是不是真的切芥末。

我的研究建議使用與背景大小的背景img：封面。這是一個很好的方法是否可以將水平和垂直的蓋子對中？並作出反應？

提高更多的方向將是偉大的有很多文章我們那裏，但我無法找到確切的答案，我的需要。

更新：@LGSon這是偉大的謝謝。這是迄今爲止我嘗試過的最佳解決方案....我喜歡在div內控制圖像的方式。完善。我想現在的區別是如何控制div的縱橫比。如果我將寬度設置爲50％，它仍然固定的高度。

Answer 1

你<img>規則是好的，但你必須給每個<img>裝入另一個容器中得到一個基於百分比的寬度和height: auto;

Answer 2

你應該設置圖像規則，與其他規則一起。

.img { 
    width:100%; 
    max-width:100%; 
} 

您知道圖像的尺寸還是他們是意料之外的？

上面的規則是指如果您控制圖像及其與設計中的比例相符。

默認情況下，高度是自動的，並且添加！重要的值並沒有太大區別。

使用背景圖像是一個整潔的功能，但封面將不會按預期做這項工作。它覆蓋容器，並根據需要將圖像拉伸或縮小以完全填充。不管是否顯示在頁面上，或者不作爲css文件的一部分，背景圖片也不推薦用於執行的原因，除非您根據需要使用不需要的請求加載CSS文件。

好的這個幫助，我會很樂意澄清。

我也不同意有關將父容器的高度設置爲auto的評論，因爲它什麼都不做。這是默認行爲...

Answer 3

你可以這樣做：

CSS

div { 
    display: block; 
    overflow: hidden; 
} 

.img { 
    width: 200%; 
    height: auto!important; 
    margin: -50%; 
} 

HTML

<div> 
    <img class="img" src="http://a5.mzstatic.com/us/r30/Purple5/v4/5a/2e/e9/5a2ee9b3-8f0e-4f8b-4043-dd3e3ea29766/icon128-2x.png"> 
</div> 

DEMO HERE