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

Question

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?

Answer 1

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.