我正在建立一个包含许多幻灯片的垂直布局,每个幻灯片都有100%的高度以适合不同的分辨率。我使用的是zurb-foundation 5前端,在该站点的顶部,我想创建一个带有轨道的背景幻灯片;为此,我组织了标记,以便构成轨道滑块的每个“ li”都具有100%的高度和个人背景图像。 Evreything可以正常工作,唯一的问题是,一旦加载了页面,当我增加浏览器的高度时,我的背景就不会变大。
这就是HTML标记:
<section id="top">
<ul class="top-slider" data-orbit>
<li class="slide1">
<li class="slide2">
</ul>
</section>
和CSS之一:
html, body, #top, #test {
width:100%;
height:100%;
margin:0;
}
.orbit-container, .orbit-container ul {
height:100%;
}
.slide {
height:100%;
background-repeat: no-repeat;
background-position:center;
background-size: cover;
}
.slide1 {
@extend .slide;
background-image: url('../images/slider_1.jpg');
}
.slide2 {
@extend .slide;
background-image: url('../images/slider_2.jpg');
}
最佳答案
尝试使用“最大宽度”而不是“宽度”。
关于css3 - 背景尺寸和100%高度块的问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20378072/