Jquery 所有屏幕的全背景滑块，较小图像的纵横比保持不变

我正在使用HTML、CSS、jQuery、slick.js slider和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>

我对slick slider的jQuery是：

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

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

如果有其他选择或创意，我们将不胜感激。

将“img”图像设置为“div”背景图像

你的div{
宽度：100%；
高度：100px；
背景图像：url（'file.jpg'）；/*这一个*/
背景位置：中心；
背景尺寸：封面；
}

问题是，我使用的是laravel，图像是动态的，因此它使用的变量具有图像目录的值，我在src-like路径中使用它。$file->filename）}}“>并且所有img标记都使用@foreach of laravel循环

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