Question

我正在构建一个包含许多幻灯片的垂直布局，每个幻灯片都有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');
}

Answer 1

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

Answer 2

谢谢你的答案，不幸的是它不起作用。无论如何，我解决了添加！重要的

.orbit-container, .orbit-container ul {
  height:100% !important;
}

：d

背景大小和100％高度块的问题

2 个答案: