Question

我正在尝试使用Orbit（基础5）制作全屏响应式幻灯片。我对背景图片有问题，它仍然是固定的。

我的代码：

<ul class="example-orbit" data-orbit>
  <li class="slide slide1"></li>
  <li class="slide slide2"></li>
</ul>




html,body {
  width: 100%;
  height: 100%;
}
ul , li {
  margin: 0;
  padding: 0;
}
.orbit-container {
  width: 100%;
  height: 100%;
}

.orbit-container ul,.orbit-container .orbit-slides-container>* {
  height: 100%; 
}

.slide {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center center;
}
    .slide1 {
      background: url('image-url') no-repeat;
}

        .slide2 {
          background: url('image-url') no-repeat;
    }

我该如何解决？

DEMO

感谢。

Answer 1

将background-size添加到您设置背景的类：

.slide1, .slide2 {
background-size:100%;
}

Answer 2

添加

.orbit-container .slide {
    background-size: contain;
}

通过firebug控制台似乎使其响应。

响应的背景图像

2 个答案: