具有自动宽度的猫头鹰转盘物品

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%