Question

我正在尝试使用最新的旋转木马文档来实现我所需要的，基本上我想在平板电脑和移动设备中的大屏幕2中显示3个图像，事情是我之前已经实现了这一点，但是我的图像被拉伸，所以我试图使用自动宽度，图像停止拉伸，但然后发生另一个问题我的旋转木马不显示我在响应对象中设置的项目，它试图适应所有容器与我的所有项目，我可以做些什么来使图像具有良好的比例，以及我的图像继续响应：

代码：

<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%图像

带自动宽度的猫头鹰卡鲁塞尔项目

1 个答案: