动态调整背景图片大小以适合 window
Dynamically size the background image to fit the window
我认为这是一个在线诊断的常见问题,但由于某种原因,我所看到的似乎没有任何效果。我基本上有一个网站,其中有几个相互堆叠的背景。这个想法是按钮会将背景滚动到下一个 - (临界点)每个背景都完全适合浏览器的可视区域,例如:
[编辑]
我的问题是让背景 images/div 适应浏览器的大小,无论它是什么大小。在此示例中,背景很好地适合浏览器,但是当我调整大小时(正如我设置背景高度所预期的那样),您可以开始看到下面的下一个背景:
我想要第一个背景填充可见的浏览器window。只有当我单击相关按钮时,下一个背景才会变得可见 - 并且本身会填充可查看的浏览器 space。
我目前在工作,没有手头的代码来准确显示我尝试过的内容,但请随意以这种方式提出任何建议,因为我可能只是错过了我尝试过的其他发现的一个小细节。
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>
我认为最好的选择是将 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>
我认为这是一个在线诊断的常见问题,但由于某种原因,我所看到的似乎没有任何效果。我基本上有一个网站,其中有几个相互堆叠的背景。这个想法是按钮会将背景滚动到下一个 - (临界点)每个背景都完全适合浏览器的可视区域,例如:
[编辑] 我的问题是让背景 images/div 适应浏览器的大小,无论它是什么大小。在此示例中,背景很好地适合浏览器,但是当我调整大小时(正如我设置背景高度所预期的那样),您可以开始看到下面的下一个背景:
我想要第一个背景填充可见的浏览器window。只有当我单击相关按钮时,下一个背景才会变得可见 - 并且本身会填充可查看的浏览器 space。
我目前在工作,没有手头的代码来准确显示我尝试过的内容,但请随意以这种方式提出任何建议,因为我可能只是错过了我尝试过的其他发现的一个小细节。
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>
我认为最好的选择是将 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>