Html 当图像高度设置为100%时，滚动条出现问题/溢出

我试图得到一个图像是100%的高度浏览器窗口。我成功地使用了下面的代码；但是，滚动条允许页面在图像下方向下滚动2倍左右。这是保证金问题吗？我不希望滚动条出现在所有，但我也希望图像触摸页面底部

HTML:

---

问题在于，默认情况下，图像与基线垂直对齐。如果将图像放在文本旁边，可以看到这一点。图像与文本的基线对齐，而像g和y这样的字母位于基线之下。你得到的空间是基线下的空间，这是为了让字母在下面。如果将

vertical align

更改为

top

，空间将消失

---

添加

display:block

到

。artwork img

<div class="container">
    <div class="artwork">
        <img src="images/picture1.jpg">
    </div>
</div>

* { margin: 0; }

body, html, .container {
    height: 100%;
}

.artwork img {
    height: 100%;
}

.artwork img {
    height: 100%;
    vertical-align: top;
}