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.

score 0 · Answer 1 · answered Jul 16 '18 at 01:45

0

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

answered Jul 16 '18 at 01:45

Dwipa Arantha

93
1
7

the thing is, i am using laravel and the images are dynamic so it is served using variables having the value of directory of image which i use it in src like and all img tags is been looped using @foreach of laravel – zyrus sketches Jul 16 '18 at 05:11

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

1 Answers1