bootstrap 4 carousel same height for different image sizes and screen dimensions

user_7637261 0
Viewed 13183

Here is a carousel example from w3schools. 

<div id="demo" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>

  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="la.jpg" alt="Los Angeles">
    </div>
    <div class="carousel-item">
      <img src="chicago.jpg" alt="Chicago">
    </div>
    <div class="carousel-item">
      <img src="ny.jpg" alt="New York">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>

</div>

to make the carousel responsive I added the following in css:

.carousel-item-next, .carousel-item-prev, .carousel-item.active {
    display: block !important;
}

In my website, I have several images having same dimensions (height 300px and width 600px) except only one of them having height 300px and width 300px). So in css I set:

.carousel-item>img{
    max-height: 300px;
}

this way when images slide in carousel they have same height.

But when I resize the page, or open it on smaller size device, since carousel is responsive, the height decreases. But height is smaller for 300px width image and larger for 600px width images. So when carousel slides images, when arrives to the 300x300 image the height increases and when arrives to 600x600 image the height decreases.

How can I let the height of the carousel similar for all images, for all dimensions?

bootstrap-4 twitter-bootstrap css html
4 Answers

A solution that works fine for me is to set a max-height for media queries. For example:

@media (max-width: 688px) {
    .carousel-item>img {
        max-height: 146px;
    }
}

To get the max-height value I referred to the inspect element.

user_76372610

This is a good example, using jQuery:

https://codepen.io/mohan-aiyer/pen/MzgvbN

// Set all carousel items to the same height function carouselNormalization() {

    window.heights = [], //create empty array to store height values
    window.tallest; //create variable to make note of the tallest slide
    
    function normalizeHeights() {
        jQuery('.parab .carousel-inner .carousel-item').each(function() { //add heights to array
            window.heights.push(jQuery(this).outerHeight());
        });
        window.tallest = Math.max.apply(null, window.heights); //cache largest value
        jQuery('.parab .carousel-inner .carousel-item').each(function() {
            jQuery(this).css('min-height',tallest + 'px');
        });
    }
    normalizeHeights();

    jQuery(window).on('resize orientationchange', function () {
        
        window.tallest = 0, window.heights.length = 0; //reset vars
        jQuery('.parab .carousel-inner .carousel-item').each(function() {
            jQuery(this).css('min-height','0'); //reset min-height
        }); 
        
        normalizeHeights(); //run it again 

    });
    
}

jQuery( document ).ready(function() {
    carouselNormalization();
});
user_164479130

Here is an answer for those who want to do it in bootstrap 5.2.0:

<div class="carousel-inner">
  <div class="carousel-item active">
    <div class="d-flex justify-content-center align-items-center" style="height: 300px">
      <img src="..." class="h-100 w-auto" alt="...">
    </div>
  </div>
  ...
</div>

user_195878310

I've found that the best way to solve this problem so the images fit all screen sizes is to ensure that you crop all of your images to the same size.

I used this online tool https://pixlr.com/editor/.

Cropping my images by selecting the crop icon then choosing the aspect ratio and cropping to 1200x480.

It's solved the problem for me.

user_113216870
Related