javascript - 具有自动宽度的 Owl Carousel 元素

Question

我正在尝试使用最新的旋转木马文档来实现我的需要，基本上我想在大屏幕上显示 3 张图像，在平板电脑上显示 2 张，在移动设备上显示 1 张，问题是我之前已经实现了，但是 1我的图像被拉伸(stretch)了，所以我尝试使用自动宽度，图像停止被拉伸(stretch)，但随后出现另一个问题我的旋转木马不显示我在响应对象中设置的元素，它试图让所有容器都适合我的所有内容元素，我该怎么做才能使图像具有良好的比例，并且我的图像继续响应:

代码:

<section class="content_section bg_gray border_b_n">
    <div class="content row_spacer clearfix" style="max-width:939px">
      <div class="owl-carousel">
             <div class="item">
                <img src="image1.png" width="112" height="112" alt="client name">
            </div>
            <div class="item">
                <img src="image2.png" width="210" height="40" alt="client name">
            </div>
            <div class="item">
                <img src="image3.png" width="210" height="40" alt="client name">
            </div>
            <div class="item">
                <img src="image4.png" width="210" height="40" alt="client name">
            </div>
            <div class="item">
                <img src="image5.png" width="112" height="112" alt="client name">
            </div>
            <div class="item">
                <img src="image6.png" width="210" height="40" alt="client name">
            </div>
            <div class="item">
                <img src="image7.png" width="112" height="112" alt="client name">
            </div>
        </div>
    </div>

$(document).ready(function(){
    $(".owl-carousel").owlCarousel({

      responsiveClass:true,
      items: 3,
      autoplay: true,
      margin:20,      
      loop:true,
      mouseDrag:false,
      autoWidth:true
    responsive:{
                0: {
            items: 1
        },
        479: {
            items: 1
        },
        768: {
            items: 2
        },
        979: {
            items: 3
        }

    }
  });
});

Answer 1

试试这个 -- 设置图片的max-width:100%