OWL Carousel 固定高度？答案

【问题标题】：OWL CAROUSEL fixed height?OWL Carousel 固定高度？
【发布时间】：2016-12-29 00:50:15
【问题描述】：

我目前正在使用 Owl Carousel，我想知道是否有办法调整图像大小以使每个图像的高度保持一致。我正在使用这个插件来展示我的摄影作品，我有横向和纵向尺寸。我尝试在 JS 中使用 autoWidth，但它使我的肖像图像太大而我的风景图像太短，我如何让所有图像都有一个设定的高度？我尝试调整 CSS，但横向图像似乎在下一张图像后面并且不显示全宽。看起来有一个设定的宽度，当我调整宽度时，图像就会被拉伸。我在轮播中有 19 件物品。还尝试调整 JS 响应部分中的项目，当我将其调整为两个项目时，横向图像的比例正确，但纵向图像最终被拉伸。关于如何解决的任何想法？

这是我使用的 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
        }
      }
    })
  })

【问题讨论】：

尝试以 px 为单位给出高度和宽度，然后以 px 为单位给出最大高度。 jsfiddle 或 codepen 上的工作演示会很棒。
它可以工作，但是，响应性看起来很糟糕，因为现在所有的图像都很大。有没有办法调整尺寸，使移动视图中的高度不一致？
您可以尝试使用背景尺寸：封面。

标签： javascript jquery html css owl-carousel

【解决方案1】：

您可以在您的 css 中使用此代码

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

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

【讨论】：

【解决方案2】：

如果您使用的是 Bootstrap，则添加 img-responsive 类：

<img class="img-responsive">

这对我有用，我也面临同样的问题。

【讨论】：

如果他不是？

【解决方案3】：

尝试玩这样的东西：

display:block; height:500px !important; margin:0 auto 30px;

【讨论】：

【解决方案4】：

为img标签添加样式，猫头鹰轮播自动将高度调整为最大图像。 img 标签宽度高度可能不起作用，请尝试添加 css 样式


            <img
              class="img-fluid"
              src={require("../../assets/assorted-flowers-on-table-2253831.jpg")}
              style="width:800px; height:600px;"
            />

【讨论】：

【解决方案5】：

加入你的风格：

img {
    width: 100%;
    height: 500px!important;
    object-fit: cover;
    object-position: center;
}

如果您需要，可以在图像的每个父级上强制设置高度。这对我有用。

【讨论】：