Owlcarousel2: How to get same height for all the images in the owl-carousel?

Created on 27 Jan 2018 · 5Comments · Source: OwlCarousel2/OwlCarousel2

Some of my images are of 250px height some are 100 px.. How to adjust height to all images as same.?

Source

ritsraghani

Most helpful comment

You can set owl-stage display as flexbox and then apply height 100% on images

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

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

devgnx on 1 Feb 2018

👍24 👀2 🎉2 👎2

All 5 comments

did you try applying a img { height: 100% } and div.image-wrapper{ height: 100px} to the wrapping div?

ianhobbs on 30 Jan 2018

You can set owl-stage display as flexbox and then apply height 100% on images

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

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

devgnx on 1 Feb 2018

👍24 👀2 🎉2 👎2

(Sorry about the canned reply.)
I'm sorry but this seems not be an "issue" related to the OwlCarousel project. Please go to a site like http://stackoverflow.com/ and get help by the community.

pascalporedda on 12 Feb 2018

👍3

To maintain aspect ratio as well as setting height use below code

.owl-carousel .owl-wrapper {
    display: flex !important;
}
.owl-carousel .owl-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: initial;
}