javascript - 如何让 img 填充视口(viewport)？

Question

我怎样才能像这些网站一样获得全视口(viewport)大小的 img 效果？ michaelpumo.com , www.montere.it当有人访问网站时，我希望 img 能够响应并适合整个视口(viewport)。我已经尝试在 html 元素上使用响应式背景 img，它确实像我想要的那样覆盖了视口(viewport)，但是添加到页面的任何新元素只会放在 img 之上。相反，我希望用户能够像在那些网站上那样向下滚动并查看页面的其余部分。当我使用内联 img 时出现同样的问题。

Answer 1

因为这是一个广泛的问题，这里是一个广泛的答案。使用 100vh 和 100vw 作为图像，参见 fiddle .

img{宽度:100vw；高度:100vh;}