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

最佳答案

如果您使用的是Bootstrap,请添加img-responsive类:

<img class="img-responsive">

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

10-05 20:58
查看更多