英雄單位的100％寬度圖像

Question

我正在尋找將圖像置於佔地100％的單位的.hero單位內。這意味着它可以根據整個窗口大小進行縮放。

現在我在那裏，但它看起來像圖像右邊有100px的填充。如果我將圖像最大寬度：100％調整爲更大，則不會相應地縮放。

<div class="hero-unit"> 
    <img src="images/landscape.png"> 
</div> 

有誰有如何刪除右邊的填充的想法，但也保留引導的自動調整功能？

Answer 1

width: 100%; height: auto;應該工作，只要容器div根據窗口寬度調整大小是正確的。

Answer 2

如前所述使用以下的選擇：

 

.hero-unit img { 
width: 100%; height: auto; 
} 
 

工作樣本：http://jsfiddle.net/basarat/MgcDU/2145/

Answer 3

你可以做到以下幾點：

這裏有一個的jsfiddle http://jsfiddle.net/shail/5YD2J/1/

<div class="container"> 
<div class="hero-unit"> 
    <img src="http://placehold.it/1500x400"> 
</div> 
</div> 

.hero-unit { 
    padding:6px; 
    } 

您需要保持良好的形象分辨率，縮小寬度和高度較小的圖像會導致尺寸不佳，並且看起來不太好。