Question

我试图让图像达到浏览器窗口高度的100％。我成功使用了下面的代码;但是，滚动条让页面在图像下方滚动约2px。这是保证金问题吗？我不希望滚动条出现，但我也希望图像触及页面底部。

HTML：

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

CSS：

* { margin: 0; }

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

.artwork img {
    height: 100%;
}

Answer 1

问题在于，默认情况下，图像与基线垂直对齐。如果您在某些文本旁边放置图像，则可以看到此信息。图像与文本的基线对齐，而g和y等字母则低于基线。你得到的空间是基线以下的空间，下面是字母。如果您将vertical-align更改为top，则该空格将消失。

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