htmlcssslick

Fit image to screen using CSS with Slick Carousel


I am making an image carousel using Slick. I want to fit the width of the image along screen and the height is scaled with the width. Below is my index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>slick test</title>

    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
</head>
<body>
    
        <div class="carousel-container">
            <div >
                <img class="carousel" src="images/1.jpg">
            </div>
            <div >
                <img class="carousel" src="images/2.jpg">
            </div>
            <div >
                <img class="carousel" src="images/3.jpg">
            </div>
    
        </div>

    
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="slick/slick.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

Below is my attempt in style.css:

.carousel-container {
    margin: 0;
    padding: 0;
    max-width: 100%;
    width: 100%;
}

carousel {
    width: 100%;
    height: auto;
}

The images seem to be printed at its original resolution.

How to make it right? Do I need to change anything in slick.css or something else?


Solution

  • I did not understand this line

    the height is scaled with the width

    Hope this is what you want.

    .carousel-container {
      margin: 0;
      padding: 0;
      max-width: 100%;
      width: 100%;
    }
    
    .carousel {
      width: 100vw;
      height: auto;
    }
    .img-carousel{
      width: 100%; height: 100%; object-fit: cover
    }
    body{
      padding: 0;
      margin: 0;
    }
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>slick test</title>
    
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    
    </head>
    <body>
        
            <div class="carousel-container">
                <div class="carousel" >
                    <img class="img-carousel" src="https://picsum.photos/600/300">
                </div>
                <div class="carousel">
                    <img class="img-carousel" src="https://picsum.photos/100/300">
                </div>
                <div class="carousel">
                    <img class="img-carousel" src="https://picsum.photos/200/100">
                </div>
        
            </div>
    
        
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
        <script>
          $('.carousel-container').slick({
            arrows:false            
          });
        </script>
    </body>
    </html>

    here to make the image fill entire scree I have made div to 100wv then added width: 100%; height: 100%; object-fit: cover to the img tag.

    added few settings to slick

    <script>
      $('.carousel-container').slick({
        arrows:false,
      });
    </script>
    

    arrows:false, to hide arrows.