英雄单位的100％宽度图像

Question

我希望在.hero-unit中放置一个占据100％单位的图像。这意味着它将根据整个窗口大小进行缩放。

现在我有了，但看起来图像右边有100px填充。如果我将图像max-width：100％调整为更大的值，则不会相应地缩放。

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

有没有人知道如何删除右边的填充，还要保留bootstrap的自动调整大小功能？

Answer 1

如上所述使用以下选择器：

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

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

Answer 2

width: 100%; height: auto;应该可以工作，只要容器div根据窗口宽度调整大小是正确的。

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;
  }

您需要以高分辨率拍摄图像，缩放宽度和高度较小的图像会导致拉伸尺寸不佳并且看起来不太好。