full background slider for all screens with aspect ratio maintained for smaller images

Question

I am working on a template using HTML, CSS, jQuery, slick.js slider, and the Bootstrap CSS framework.

I want to implement a slider which takes 100% width of the screen no matter what the resolution is, and on that same slider, I want to maintain the aspect ratio of the images no matter the image if wide long or small.

I have maintained the aspect ratio of slider images, but it is not taking full width.

The screenshot is as follows:

I want that image to take full width of the screen of any device.

And for this too, it must cover it to the box seen on image.

My HTML code is:

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

And my CSS code is:

.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;
    }
}

And my jQuery for slick slider is:

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

The image must look good and sharp even if it is small image.

If there is some alternate way or any other option or creativity, any help will be appreciated.

Answer 1

Set you "img" image into "div" background-image

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

Let your "div" empty without any "img" content.

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

Then follows with your slide show function..