css - 背景大小和 100% 高度 block 的问题

Question

我正在构建一个包含许多幻灯片的垂直布局，每张幻灯片都有 100% 的高度以适应不同的分辨率。我正在使用 zurb-foundation 5 前端，在网站的顶部我想创建一个带轨道的背景幻灯片；为实现这一目标，我组织了标记，使构成轨道 slider 的每个“li”都具有 100% 的高度和个人背景图像。一切正常，唯一的问题是，加载页面后，当我增加浏览器的高度时，我的背景不会变大。

这是 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');
}

Answer 1

尝试使用“max-width”而不是“width”。