像medium.com一样的完整视口图像

Question

Medium如何在这个例子中做完整的视口图像?(不是头图，而是第一个伸出手的人的图像)。

我看到他们使用了background-image和其他css3属性，像这样:

<div class="section-background-image" style="background-image: url(https://d262ilb51hltx0.cloudfront.net/max/700/gradv/29/81/40/1*vd1EjIG6xUWgqcX9uQLS6g.jpeg);"></div>
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100vh;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;

但是当我这样做的时候，它不起作用。我猜他们也用javascript

Answer 1

试着把你的背景图片放到你的css中

   background-image:url('../images/..');

和

   WIdth:100%;height:100%;

删除

   right: 0;

Answer 2

在将视口设置为device-width后使用视口宽度和高度属性，如下所示:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

和css:

width:100vw; height:100vh;