Flexslider全高和寬度

Question

我正在尋找如何讓我的flexslider完整的高度和寬度的瀏覽器。當我將瀏覽器調整爲更大的格式時，圖像將會縮放，但是當我縮小瀏覽器的尺寸時，會比底部留出很多空間。 我該如何解決這個問題。 我使用我的柔性滑塊最簡單的設置。

謝謝。

卡斯帕

Answer 1

閱讀本SO answer

我遇到了一些問題，Foundation 4覆蓋效果，因此，我的「IMG」的造型看起來像這樣：

.flexslider .slides > li .centered img { 
    min-height:100%!important; 
    min-width:50%!important; 
    width:auto!important; 
    max-width:none!important; 
    display:inline-block !important; 
    margin-right:-100% !important; 
} 

Answer 2

您可以使用背景圖片和背景覆蓋到FIT或填充圖像。

對我來說，它是像這樣覆蓋flexslider CSS：

.flex-viewport{ 
    position: fixed; 
    width: 100%; 
    height: 100%; 
} 

.flexslider .slides, 
.flexslider .slides > li 
{ 
    height: 100%; 
} 

.flexslider .slides > li{ 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center; 
} 

然後在HTML組圖像爲CSS背景：

... 
<ul class="slides"> 
    <li style="background-image:url(images/slide-01.jpg)"></li> 
    <li style="background-image:url(images/slide-02.jpg)"></li> 
    <li style="background-image:url(images/slide-03.jpg)"></li> 
</ul> 
...