Search code examples
twitter-bootstrapbootstrap-4

How to Put Different Sizes of Images Inside a Carousel in Bootstrap 4?

I'm having trouble putting different size of images inside carrousel in Bootstrap 4. How can I put different sizes of images inside this carousel.

For an example, I want to put different sizes of images as in the below code. In the current situation, when I do that it just takes that images size.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous">
</script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
</script>




<div class="container">
  <div id="carouselwithIndicators" class="carousel slide w-50" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2s"></li>
    </ol>

    <div class=" carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" src="https://www.tutorialspoint.com/bootstrap/images/slide1.png" alt="First slide">
      </div>

      <div class="carousel-item">
        <img class="d-block w-100" src="https://i.pinimg.com/originals/fb/3f/e8/fb3fe82c671831afb614ac18cd69e11e.jpg" alt="Second slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://www.tutorialspoint.com/bootstrap/images/slide3.png" alt="Third slide">
      </div>
    </div>

    <a class="carousel-control-prev" href="#carouselwithIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>

    <a class="carousel-control-next" href="#carouselwithIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

Solution

  • Reason behind this

    Let's have a look at what you're doing here first:

    <div class = "carousel-item">
    <img class = "d-block w-100" src = "https://i.pinimg.com/originals/fb/3f/e8/fb3fe82c671831afb614ac18cd69e11e.jpg" alt = "Second slide">
</div>

    Have a close look at the classes you added on the image element, d-block means the image display will be set to block and w-100 means the width will be 100%. Read more here.

    Now that your second (dog) image is way too big in height compared to width, and there is no max-height set, it will expand the carousel.

    Solution:

    Firstly let's remove the w-100 class from the dog image item.

    <div class = "carousel-item">
    <img class = "d-block" src = "https://i.pinimg.com/originals/fb/3f/e8/fb3fe82c671831afb614ac18cd69e11e.jpg" alt = "Second slide">
</div>

    Now let's add a little css:

    .carousel-item img {
  margin: 0 auto; /* this will align the image to center. */
  width: auto; /* for those images which don't have a width specified, but has a max-height will be auto adjusted */
}

    As commented above, you already understand which property is going to handle what values.

    It's time to check the height of the carousel at the initial time of page load, So, whenever the document is ready, we check the height of the carousel with the #carouselwithIndicators selector. and then we apply this height value to all the images in the carousel.

    Here is the JS:

    $(document).ready(function(){
  console.log($('#carouselwithIndicators').css('height')); // check the initial height of the carousel;
      
  // now apply this height as a max-height on all the image items; css will handle the rest;
  $('#carouselwithIndicators').find('.carousel-item img').css('max-height', $('#carouselwithIndicators').css('height'))
});

    Snippet

    Have a look at the snippet now:

    $(document).ready(function(){
  console.log($('#carouselwithIndicators').css('height')); // check the initial height of the carousel;
  
  // now apply this height as a max-height on all the image items; css will handle the rest;
  $('#carouselwithIndicators').find('.carousel-item img').css('max-height', $('#carouselwithIndicators').css('height'))
});
    .carousel-item img {
  margin: 0 auto;
  width: auto;
}
    <!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous">
</script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
</script>





<div class="container">
  <div id="carouselwithIndicators" class="carousel slide w-50" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2s"></li>
    </ol>

    <div class=" carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" src="https://www.tutorialspoint.com/bootstrap/images/slide1.png" alt="First slide">
      </div>

      <div class="carousel-item">
        <img class="d-block" src="https://i.pinimg.com/originals/fb/3f/e8/fb3fe82c671831afb614ac18cd69e11e.jpg" alt="Second slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://www.tutorialspoint.com/bootstrap/images/slide3.png" alt="Third slide">
      </div>
    </div>

    <a class="carousel-control-prev" href="#carouselwithIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>

    <a class="carousel-control-next" href="#carouselwithIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>