全屏幕滑塊，適用於所有屏幕，並保持寬高比，可顯示較小的圖像

Question

我正在使用HTML，CSS，jQuery，slick.js滑塊和Bootstrap CSS框架來設計模板。

我想實現一個無論屏幕分辨率如何都占據屏幕寬度100％的滑塊，並且在同一個滑塊上，無論圖像的寬度是長還是小，我都希望保持圖像的縱橫比。

我保持了滑塊圖像的長寬比，但是並沒有采用全寬。

屏幕截圖如下：

我希望該圖像占據所有設備屏幕的全寬。

並且為此，它必須將其覆蓋在圖像上看到的框中。

我的HTML代碼是：

<div class="container">

  <div class="col-md-12">

    <div id="background-slider">

      <center>

       <div class="w-100-perc-h-48-2-em-aspect">

         <img class="max-height-100-perc-width-auto" src="image-1.jpg" 
           alt="image-1">

       </div>

      </center>

      <center>

       <div class="w-100-perc-h-48-2-em-aspect">

         <img class="max-height-100-perc-width-auto" src="image-2.jpg" 
           alt="image-2">

       </div>

      </center>

      <center>

       <div class="w-100-perc-h-48-2-em-aspect">

         <img class="max-height-100-perc-width-auto" src="image-2.jpg" 
           alt="image-2">

       </div>

      </center>

   </div>

  </div>

 </div>

我的CSS代碼是：

.w-100-perc-h-48-2-em-aspect{
    width: 100% !important;
    height: 48.2em !important;
    display: table-cell !important;
    vertical-align: middle !important;
}

.max-height-100-perc-width-auto{
    max-height: 100% !important;
    max-width: 100% !important;
    width: auto !important;
}

@media (max-width: 1290px){
    .w-100-perc-h-48-2-em-aspect{
        width: 100% !important;
        height: 48.2em !important;
        display: table-cell !important;
        vertical-align: middle !important;
    }
}
 @media (max-width: 1080px){
    .w-100-perc-h-48-2-em-aspect{
        width: 100% !important;
        height: 39.6em !important;
        display: table-cell !important;
        vertical-align: middle !important;
    }
}
 @media (max-width: 980px){
    .w-100-perc-h-48-2-em-aspect{
        width: 100% !important;
        height: 29.94em !important;
        display: table-cell !important;
        vertical-align: middle !important;
    }
}
 @media (max-width: 520px){
    .w-100-perc-h-48-2-em-aspect{
        width: 100% !important;
        height: 15.4em !important;
        display: table-cell !important;
        vertical-align: middle !important;
    }
}
 @media (max-width: 385px){
    .w-100-perc-h-48-2-em-aspect{
        width: 100% !important;
        height: 14em !important;
        display: table-cell !important;
        vertical-align: middle !important;
    }
}
 @media (max-width: 370px){
    .w-100-perc-h-48-2-em-aspect{
        width: 100% !important;
        height: 13em !important;
        display: table-cell !important;
        vertical-align: middle !important;
    }
}
 @media (max-width: 330px){
    .w-100-perc-h-48-2-em-aspect{
        width: 100% !important;
        height: 11.3em !important;
        display: table-cell !important;
        vertical-align: middle !important;
    }
}

而且我的jQuery光滑滑塊是：

$(document).ready(function(){
        $("#background-slider").slick({
            lazyLoad: 'ondemand',
            infinite: true,
            dots: true,
            adaptiveHeight: false,
            autoplay: true,
            autoplaySpeed: 3000,
            arrows: false
        });
 });

即使圖像很小，圖像也必須看起來不錯且清晰。

如果有其他方法或其他選擇或創造力，我們將不勝感激。

Answer 1

將您的“ img”圖像設置為“ div”背景圖像

 your-div { width : 100%; Height : 100px; Background-image : url ('file.jpg'); /*this one*/ Background-position : center; Background-size : cover; } 

讓您的“ div”為空，不包含任何“ img”內容。

 <div class="your-div"></div> 

然后使用幻燈片功能。