图像宽度100％，无水平滚动

Question

我将图像设置为100％宽度，这是正常的。但是，图像产生的水平滚动条等于图像的整个宽度（在这种情况下为1366）。我已经尝试了overflow:hidden;，但它什么也没做。如何杀死额外的空白/水平滚动条？感谢。

.header-image-inner img {
    overflow: hidden;
    width: 100%;
}

<div class="header-image-inner">
    <img width="1366" height="422" alt="banner" src="http://216.227.216.66/~mercantileportag/wp-content/uploads/2015/10/Home_BannerImage1.png">
</div>

Answer 1

需要将溢出应用于容器元素，而不是元素本身。例如：

.header-image-inner{
    overflow: hidden;
}

.header-image-inner img {
    width: 100%;
}