如何获取img来填充视口？

Question

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

Answer 1

由于这是一个广泛的问题，这是一个广泛的答案。使用100vh和100vw作为图片，请参阅fiddle。

img{width: 100vw; height: 100vh;}

Answer 2

制作一个div并为他设置身份firstview

#firstview { 
  background: url(bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

更改bg.jpg并将链接添加到您的图片中。