动态调整背景图片大小以适合 window

Question

我认为这是一个在线诊断的常见问题，但由于某种原因，我所看到的似乎没有任何效果。我基本上有一个网站，其中有几个相互堆叠的背景。这个想法是按钮会将背景滚动到下一个 - （临界点）每个背景都完全适合浏览器的可视区域，例如：

[编辑] 我的问题是让背景 images/div 适应浏览器的大小，无论它是什么大小。在此示例中，背景很好地适合浏览器，但是当我调整大小时（正如我设置背景高度所预期的那样），您可以开始看到下面的下一个背景：

我想要第一个背景填充可见的浏览器window。只有当我单击相关按钮时，下一个背景才会变得可见 - 并且本身会填充可查看的浏览器 space。

我目前在工作，没有手头的代码来准确显示我尝试过的内容，但请随意以这种方式提出任何建议，因为我可能只是错过了我尝试过的其他发现的一个小细节。

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 个元素的大小设置为填满屏幕，然后将 background-size 设置为覆盖。

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

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

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

动态调整背景图片大小以适合 window

Dynamically size the background image to fit the window

css

background

background-image

image-resizing