Image 像medium.com上的完整视口图像

媒体是如何处理这样的完整视口图像的？不是头像，而是那家伙伸出双手的第一张照片

我看到他们使用背景图像和其他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;

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

---

但当我这么做的时候，它就不起作用了。我猜他们也使用javascript

尝试将背景图像放入css中

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

及

除去

   right: 0;

---

将视口设置为“设备宽度”后，使用“视口宽度”和“高度”属性，如下所示：

<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;

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

---

如果有多个完整的视口图像，它将不起作用，因为“绝对位置”将所有图像都放在顶部