Centered owl-carousel where each image has the same hight and keeps its aspect ratio
Centered owl-carousel where each image has the same hight and keeps its aspect ratio Is there an approach to to create a centered owl-carousel where each image has the same height without losing its aspect ratio? owl-carousel I tried to calculate the image sizes with JS/jQuery but then the calculation of the owl-carousel gets messed up. Same result with CSS s. example (jsfiddle): JS/jQuery owl-carousel CSS $(document).ready(function () { $('.loop').owlCarousel({ center: true, items: 3, loop: true, margin: 20 }); }); .owl-carousel .owl-stage { height: 150px; } .owl-carousel .owl-item { height: 100%; } .owl-carousel .owl-item .item { height: 100%; } .owl-carousel .owl-item img { height: 100% !important; width: auto !important; margin: 0 auto; } <link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css"> <...