动态调整背景图像的大小以适合窗口

Question

我认为这是一个在线诊断的常见问题，但我看到的似乎并没有像我期望的那样工作。我基本上有一个网站，有几个背景堆叠在一起。我们的想法是按钮会将背景滚动到下一个 - （关键点），其中每个背景完全适合浏览器的可视区域，如：

[编辑] 我的问题是让背景图像/ div适合浏览器的大小，无论它的大小。在这个例子中，背景非常适合浏览器，但是当我调整大小时（正如我设置背景高度所预期的那样），你可以开始看到下面的下一个背景：

我希望第一个背景填充可查看的浏览器窗口。只有当我点击相关按钮时，下一个背景才会变得可见 - 并且它本身将填满可查看的浏览器空间。

我现在正在工作，没有代码可以准确显示我尝试的内容，但可以随意提出任何建议，因为我可能只是错过了我尝试的其他调查结果中的一个小细节。

Answer 1

vh单位可用于设置背景的高度。但是在下面的例子中，我用它来设置div的高度，并让背景图像具有自动宽度，100％高度：

body {
  margin: 0;
}

#menu {
  position: fixed;
  left: .5em;
  top: .5em;
  right: .5em;
  padding: .5em;
  background-color: rgba(255, 255, 255, .7)
}

.item {
  height: 100vh;
  background-size: auto 100%;
  background-position: center center;
}

#item-1 {
  background-image: url(https://dummyimage.com/200x100/FC0/FFF&text=Background+Image);
}

#item-2 {
  background-image: url(https://dummyimage.com/200x100/F0C/FFF&text=Background+Image);
}

#item-3 {
  background-image: url(https://dummyimage.com/200x100/0CF/FFF&text=Background+Image);
}

<div id="menu">
  <a href="#item-1">Item 1</a>
  <a href="#item-2">Item 2</a>
  <a href="#item-3">Item 3</a>
</div>
<div id="item-1" class="item"></div>
<div id="item-2" class="item"></div>
<div id="item-3" class="item"></div>

Answer 2

我认为最好的选择是将3个元素填充到屏幕上，然后将背景大小设置为覆盖。

这样，当图像和屏幕的宽高比不匹配时，你就可以了。

＆＃13;

＆＃13;

body {
  margin: 0;
}


.item {
  height: 100vh;
  width: 100vW;
  background-size: cover;
}

#item-1 {
  background-image: url(http://lorempixel.com/400/200);
}

#item-2 {
  background-image: url(http://lorempixel.com/600/200);
}

#item-3 {
  background-image: url(http://lorempixel.com/400/600);
}

＆＃13;

<div id="item-1" class="item"></div>
<div id="item-2" class="item"></div>
<div id="item-3" class="item"></div>

＆＃13;

＆＃13;

＆＃13;