CODEWITHSUNDEEP
javascriptcssowl-carousel
user8880106
user8880106

Reputation:

Have the same height with autoWidth enabled OwlCarousel

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.

Upvotes: 1

Views: 863

Answers (1)

Prajwal
Prajwal

Reputation: 4000

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/

Upvotes: 1

Related Questions