无需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. */
}