油滑的空白空間與流體背景圖像

Question

我使用滑動滑塊來顯示一些fuid背景圖像，但添加了每個新圖像（「slide-img」類），在滑塊的頂部和底部添加了一個空白空間。

我認爲填充頂部導致這種方式，但我不知道如何解決它保持流體效果，我會很感激，如果有人知道。

這裏是JSFiddle

$('.slides').slick({ 
 
    slidesToShow: 1, 
 
    autoplay: true, 
 
});

.slide-img { 
 
    background: url('http://i.imgur.com/RVfIr7W.jpg') no-repeat center/100%; 
 
    padding-top: 36.59%; 
 
}

<link href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/> 
 

 
    <div class="slides"> 
 
    <div class="slide-img"></div> 
 
    <div class="slide-img"></div> 
 
    <div class="slide-img"></div> 
 
    </div> 
 
    
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

Answer 1

油滑創建幻燈片的包裝，並通過邊使他們的一面，所以當你在幻燈片本身使用填充它會計算基於百分比放在一起的所有幻燈片的寬度。

您需要添加一個內部div來放置填充，這樣就需要一張幻燈片的百分比，您將獲得您正在查找的高度。

<div class="slides"> 
    <div><div class="slide-img"></div></div> 
    <div><div class="slide-img"></div></div> 
    <div><div class="slide-img"></div></div> 
    </div> 

https://jsfiddle.net/ke51vqqm/3/