javascript - Owl Carousel 固定高度？

Question

我目前正在使用 Owl Carousel，想知道是否有一种方法可以调整图片大小，使每张图片的高度保持一致。我正在使用这个插件来展示我的照片，我有横向和纵向两种尺寸。我尝试在 JS 中使用 autoWidth，但它使我的肖像图像太大而我的风景图像太短，如何让所有图像都具有设定的高度？我尝试调整 CSS，但横向图像似乎在下一张图像的后面并且没有显示全宽。看起来有一个设定的宽度，当我调整宽度时，图像只是被拉伸(stretch)了。我在轮播中有 19 个元素。还尝试在 JS 的响应部分调整元素，当我将其调整为两个元素时，横向图像的比例正确，但纵向图像最终被拉伸(stretch)。关于如何修复的任何想法？

这是我使用的 CSS 代码:

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

Answer 1

你可以在你的css中使用这段代码

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

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