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

Question

我将一张图片设置为 100% 宽度，它工作正常。但是，图像会产生一个水平滚动条，等于图像的整个宽度（在本例中为 1366）。我试过 overflow:hidden; 但它什么也没做。我如何杀死额外的白色 space/horizontal 滚动条？谢谢

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