Question

我目前正在使用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
        }
      }
    })
  })

Answer 1

如果您正在使用Bootstrap，请添加img-responsive类：

<img class="img-responsive">

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

Answer 2

试着玩这样的东西：

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

Answer 3

您可以在CSS中使用此代码

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

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

Answer 4

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


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

OWL CAROUSEL固定高度？

4 个答案: