CODEWITHSUNDEEP
javascriptjqueryhtmlcssowl-carousel
abc0213
abc0213

Reputation: 187

OWL CAROUSEL fixed height?

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
        }
      }
    })
  })

Upvotes: 10

Views: 64515

Answers (5)

popcorn
popcorn

Reputation: 31

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.

Upvotes: 3

Nadim Al Abdou
Nadim Al Abdou

Reputation: 838

you can use this code in your css

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

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

Upvotes: 7

Ruhith Udakara
Ruhith Udakara

Reputation: 2454

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

Upvotes: 0

JpG
JpG

Reputation: 932

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.

Upvotes: 0

NoWomenNoCry
NoWomenNoCry

Reputation: 157

try to play with something like this:

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

Upvotes: 0

Related Questions