具有自动宽度的猫头鹰轮播项目

Question

我正在尝试使用最新的轮播文档来实现我所需要的，基本上我想在大屏幕上显示 3 个图像，在平板电脑上显示 2 个图像，在移动设备上显示 1 个图像，问题是我之前已经实现了这一点，但是其中 1 个我的图像被拉伸了，所以我尝试使用自动宽度，图像停止被拉伸，但随后出现另一个问题我的轮播不显示我在响应对象中设置的项目，它试图将所有容器与我的所有项目，我该怎么做才能使图像具有良好的比例，并且我的图像继续响应：

代码：

<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%的图片