响应式背景图片

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

添加背景大小，以你设置的背景类：

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

Answer 2

通过Firebug控制台添加

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

似乎使它响应。