英雄单位的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; 
    } 

您需要保持良好的形象分辨率，缩小宽度和高度较小的图像会导致尺寸不佳，并且看起来不太好。