css - 我的背景图像未正确缩放。我已经将高度更改为 100%，等等

Question

我的背景图像不想与页面的其余部分一起缩放。当我让它这样做时，当我缩小页面时，它在它下面创建了一个巨大的空白间隙。

.vintage {
  width: 100%;
  height: 100vh;
  background-image: url(vintagemcdonalds.jpg);
  background-repeat: no-repeat;
}

Answer 1

使用background-size:cover让background-image覆盖整个div。

在此处查看有关此属性的更多信息:CSS3 background-size Property

.vintage { width: 100%;
height: 100vh;
background-image: url(http://placehold.it/350x150);
background-repeat: no-repeat; 
background-size:cover;
}

<div class="vintage">

</div>