我正在建立一个包含许多幻灯片的垂直布局,每个幻灯片都有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/

10-11 23:23
查看更多