響應式背景圖片

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; 
} 

似乎使它響應。