html - 英雄单元中 100% 宽度的图像

Question

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

现在我在那里，但看起来图像右侧有 100px 的填充。如果我将图像 max-width: 100% 调整为更大的值，它不会相应地缩放。

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

有谁知道如何删除右侧的填充，同时保留引导程序的自动调整大小功能？

Answer 1

如前所述，使用以下选择器：

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

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

Answer 2

您可以执行以下操作：

这是一个 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;
  }

您需要让您的图像具有良好的分辨率，缩放具有小宽度和高度的图像会导致不良的拉伸尺寸并且不会看起来很好。

Answer 3

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