OWL CAROUSEL fixed height?

Question

I am currently using Owl Carousel, and I am wondering if there is a way to adjust the image sizes so that the height of each image is consistent. I use this plugin to display my photo, and I have both a landscape and a portrait. I tried using autoWidth in JS, but it reduces my portrait images too much and my landscape images are too short, how can I get all the images with a given height? I tried to customize the CSS, but the landscape images seem to be behind the next image and do not display the full width. It seems like there is a given width, and when I adjust the width, the image just stretches. I have 19 items in the carousel. I also tried to adjust the elements in the sensitive part of JS, when I adjust it to two elements, landscape images are the right proportions, but portrait images end up being stretched. Any ideas on how to fix it?

Here is the CSS code that I 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 are using Bootstrap, add the img-responsive class:

 <img class="img-responsive"> 

It worked for me, I also ran into the same problem.

Answer 2

try playing with something like this:

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