0

我正在使用 HTML、CSS、jQuery、slick.js 滑块和 Bootstrap CSS 框架制作模板。

我想实现一个滑块，无论分辨率是多少，它都占据屏幕的 100% 宽度，并且在同一个滑块上，无论图像是宽长还是小，我都想保持图像的纵横比。

我保持了滑块图像的纵横比，但它没有占据全宽。

截图如下：

图像-1

我希望该图像占据任何设备屏幕的全宽。

图像-2

为此，它也必须将其覆盖到图像上看到的盒子上。

我的 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
        });
 });

即使是小图像，图像也必须看起来很好且清晰。

如果有一些替代方式或任何其他选择或创造力，任何帮助将不胜感激。

4

1 回答 1

0

将“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>

然后跟随您的幻灯片放映功能..

于 2018-07-16T01:45:20.100 回答