Have the same height with autoWidth enabled OwlCarousel

Question

I want to show a little gallery in my website, but the images are not responsive with the AUTOWIDTH CODE, and they don't have the same height.

I create a JS Fiddle so I can explain my self better.

https://jsfiddle.net/w6axkqmz/1/

I tried using this CSS

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

But leave the rectangular images as a square.

Have you tried using media queries? So that it adjusts for each screen size? — Adeel Imran, Feb 12 '19 at 19:10
Possible duplicate of [Owl Carousel 2 Responsive image](https://stackoverflow.com/questions/49125314/owl-carousel-2-responsive-image) — Arif, Feb 12 '19 at 19:18

Prajwal · Answer 1 · 2019-02-12T19:23:13.673

1

Do not set height:50vh it is going to set the height of every image to 50% of browser's viewport's height. But without setting the height, object-fit is not going to work. Set height as 100% so that it will be of the same height of gallery.

Relative JSFiddle https://jsfiddle.net/2psgqb3v/

The reason you need width and height set is because for browser needs to fit the image/object to that height. If you don't specify that, then browser will take image's height/width to render.

The solution is to have media query to set the width and height of the images.

Relative fiddle https://jsfiddle.net/74rok0yg/

edited Feb 12 '19 at 19:23

answered Feb 12 '19 at 19:00

Prajwal

3,930
5
24
50

I got square thumbnails instead of rectangular ones. – Feb 12 '19 at 19:08
You will have to go with fixed height then. I'd day 250x250 should be fine. – Prajwal Feb 12 '19 at 19:10
thanks for your jsfiddle code, help me to solve this issue. – Belisario Peró Mar 31 '20 at 15:32

Have the same height with autoWidth enabled OwlCarousel

1 Answers1