使物化滑塊響應

Question

我正在試圖使物化滑塊響應使用CSS，但它不能正常工作。當我使用Firefox的自適應視圖測試我的代碼時，我得到的滑塊圖像響應的灰度背景比滑塊圖像的高度大得多（如下所示）。

.slider .slides li img { 
 

 
background-size: 100% auto;; 
 
background-repeat: no-repeat; 
 
}

<div class="row"> 
 
<div class="slider " > 
 
    <ul class="slides "> 
 
       <li> 
 
     <img class="responsive-img" id="img" src="{{ asset('font/images/IMG_61.jpg') }}"> 
 
    </li> 
 
     <li> 
 
     <img class="responsive-img" id="img" src="{{ asset('font/images/IMG_53.jpg') }}"> 
 
    </li> 
 
    <li> 
 
     <img class="responsive-img" id="img" src="{{ asset('font/images/IMG_2.jpg') }}"> 
 
    </li> 
 
    </ul> 
 
</div> 
 
</div>

screen shot size 360×640

Answer 1

試試這個，對我的作品

.slider .slides { 
    background-color: transparent; 
    margin: 0; 
    height: 400px; 
} 

.slider .slides li img { 
    height: 100%; 
    width: 100%; 
    background-position: center; 
    background-size:100% auto; 
    background-repeat: no-repeat; 
}