OWL CAROUSEL fixed height?

Question

I'm currently using Owl Carousel and am wondering if there's a way to adjust image sizes so that the height of each image is consistent. I'm using this plugin to display my photography, and I have both landscape and portrait sizes. I tried using autoWidth in the JS but it makes my portrait images too large and my landscape images too short, how do I get all the images to have a set height? I tried adjusting the CSS, but the landscape images seem to be behind the next image and doesn't display the full width. It looks like there is a set width, and when I adjust the width, the image just gets stretched. I have 19 items in the carousel. Also tried adjusting the items in the responsive part of the JS, when I adjust it to two items, the landscape images are the right proportions but the portrait images end up being stretched. Any ideas on how to fix?

Here's the CSS code I've used:

    #demos img{
    display: inline-block; 
    max-width: auto;  
    height: 500px!important; 
    margin-bottom: 30px;
  }

Javascript:

 $(document).ready(function() {
    $('.owl-carousel').owlCarousel({
      loop: true,
      margin: 0,
      responsiveClass: true,
      responsive: {
        0: {
          items: 1,
          nav: true
        },
        600: {
          items: 3,
          nav: false
        },
        1000: {
          items: 5,
          nav: true,
          loop: true,
          margin: 0
        }
      }
    })
  })

Answer 1

If you're using Bootstrap, then add the img-responsive class:

<img class="img-responsive">

This worked for me, I was also facing the same issue.

Answer 2

add style to img tag, owl carousel automatically adjust the height to the biggest image. img tag width height might not work, try adding css styles

            <img
              class="img-fluid"
              src={require("../../assets/assorted-flowers-on-table-2253831.jpg")}
              style="width:800px; height:600px;"
            />

Answer 3

Add to your style:

img {
    width: 100%;
    height: 500px!important;
    object-fit: cover;
    object-position: center;
}

And if you need, force the height on every parent of your image. That worked for me.

Answer 4

you can use this code in your css

   .owl-carousel .owl-stage {
      display: flex;
    }

   .owl-carousel .owl-item img {
      width: auto;
      height: 100%;
    }

Answer 5

try to play with something like this:

display:block; height:500px !important; margin:0 auto 30px;