OWL CAROUSEL fixed height?

9
votes

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
        }
      }
    })
  })
4
javascriptjqueryhtmlcssowl-carousel
Try giving the the height and width in px and then give it a max-height in px. A working demo on jsfiddle or codepen would be great. - norcal johnny
it works, however, the responsiveness looks bad because all the images are huge now. Is there a way to adjust the sizes so that the height isn't consistent in mobile view? - abc0213
You can try using a background-size:cover. - norcal johnny

4 Answers

4
votes

you can use this code in your css

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

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

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.

0
votes

try to play with something like this:

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

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;"
            />