Question

Media如何在此example中执行完整视口图像？（不是标题图片，而是他出手的第一张图片。）

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

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

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

你的css：

width:100vw; height:100vh;

完整的视口图像，如在medium.com上

2 个答案: