html - 调整图像大小以在没有 JS 的情况下填满屏幕

Question

当用户加载页面时，我希望图像填满整个屏幕。我想要的与 background-size:cover 非常相似，但我希望能够在没有静态背景的情况下向下滚动。

这是我目前所拥有的:

body {
    margin: 0;
}

#bg img {
    z-index: -1;
    position: absolute;
    max-width: 100%;
}

唯一的问题是图像高度不受浏览器窗口高度的限制。 height 或 max-height 没有任何区别。

是否有任何简单的方法可以在纯 CSS 中实现这一点？

Answer 1

使用 vh and vw Viewport-Relative Length单位。

#bg img {
    height: 100vh;
    width: 100vw;     /* If you want it to be full width as well as height. */
}