javascript - 猫头鹰旋转木马固定高度？(OWL CAROUSEL fixed height?)

Question

I'm currently using Owl Carousel and am wondering if there's a way to adjust image sizes so that the height of each image is consistent.(我目前正在使用Owl Carousel，想知道是否有一种方法可以调整图像大小，以使每个图像的高度保持一致。)

I'm using this plugin to display my photography, and I have both landscape and portrait sizes.(我正在使用此插件来显示我的摄影作品，并且具有横向和纵向尺寸。) I tried using autoWidth in the JS but it makes my portrait images too large and my landscape images too short, how do I get all the images to have a set height?(我尝试在JS中使用autoWidth，但是这会使我的人像图像太大而我的风景图像太短，如何使所有图像都具有设定的高度？) I tried adjusting the CSS, but the landscape images seem to be behind the next image and doesn't display the full width.(我尝试调整CSS，但是横向图像似乎在下一个图像后面，并且不显示完整宽度。) It looks like there is a set width, and when I adjust the width, the image just gets stretched.(看起来好像有一个设定的宽度，当我调整宽度时，图像就被拉伸了。) I have 19 items in the carousel.(轮播中我有19个项目。) Also tried adjusting the items in the responsive part of the JS, when I adjust it to two items, the landscape images are the right proportions but the portrait images end up being stretched.(还尝试调整JS响应部分中的项目，当我将其调整为两个项目时，横向图像是正确的比例，但纵向图像最终被拉伸了。) Any ideas on how to fix?(有关如何解决的任何想法？)

Here's the CSS code I've used:(这是我使用的CSS代码：)

    #demos img{
    display: inline-block; 
    max-width: auto;  
    height: 500px!important; 
    margin-bottom: 30px;
  }

Javascript:(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
        }
      }
    })
  })

  ask by abc0213 translate from so

Answer 1

If you're using Bootstrap, then add the img-responsive class:(如果您使用的是Bootstrap，请添加img-responsive类：)

<img class="img-responsive">

This worked for me, I was also facing the same issue.(这对我有用，我也面临着同样的问题。)