Question

解决了Slick轮播的问题，该问题使图像无法根据浏览器大小缩放（图像原始大小为300x228px）。

请明确说明：当我缩小浏览器窗口时，幻灯片减少了，但图像没有调整大小。

我一直试图解决此问题，但没有成功。这是我当前正在使用的代码。

     $(document).on('ready', function () {
            $(".slideslick").slick({
  autoplay: true,
  autoplaySpeed: 5000,
  slidesToShow: 2,
  arrows: false,
  responsive: [
    {
      breakpoint: 880,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});
			
        });

.slideslick {
          width: 100%;
          margin: 0px auto;
        }
        .slide1 img {
          position: relative;
          margin-right: auto;
          margin-left: auto
        }
        .slide2 img {
          position: relative;
          margin-right: auto;
          margin-left: auto
        }
        .slide3 img {
          position: relative;
          margin-right: auto;
          margin-left: auto
        }
        .slide4 img {
          position: relative;
          margin-right: auto;
          margin-left: auto
        }
        .slide5 img {
          position: relative;
          margin-right: auto;
          margin-left: auto;
        }
        .slick-slide{
          width: 300px
        }
        .slick-slide img{
          max-width: 100%;
          height: auto;
          min-width: 200px;
          min-height: 150px;
        }

<div class="slideslick">   
        <div class="slidercontent1">
            <div class="slide1">
                <img draggable="false" src="assets/images/incomparablesdelamor.png">
            </div>
        </div>
        <div class="slidercontent2">
            <div class="slide2">
                <img draggable="false" src="assets/images/sorayamantari.png">
            </div>
        </div>
        <div class="slidercontent3">
            <div class="slide3">
                <img draggable="false" src="assets/images/nandodelmantaro.png">
            </div>
        </div>
        <div class="slidercontent4">
            <div class="slide4">
                <img draggable="false" src="assets/images/nandodelmantaro.png">
            </div>
        </div>
        <div class="slidercontent5">
            <div class="slide5">
                <img draggable="false" src="assets/images/nandodelmantaro.png">
            </div>
        </div>
</div>

Answer 1

添加一个媒体查询，如果屏幕小于800px，则该图像的宽度将变为100％

@media(max-width:800px) {
  .slick-slide img {
    width: 100%;
  }
}

$(document).on('ready', function() {
  $(".slideslick").slick({
    autoplay: true,
    autoplaySpeed: 5000,
    slidesToShow: 2,
    arrows: false,
    responsive: [{
        breakpoint: 880,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
      // You can unslick at a given breakpoint now by adding:
      // settings: "unslick"
      // instead of a settings object
    ]
  });

});

.slideslick {
  width: 100%;
  margin: 0px auto;
}

.slide1 img {
  position: relative;
  margin-right: auto;
  margin-left: auto
}

.slide2 img {
  position: relative;
  margin-right: auto;
  margin-left: auto
}

.slide3 img {
  position: relative;
  margin-right: auto;
  margin-left: auto
}

.slide4 img {
  position: relative;
  margin-right: auto;
  margin-left: auto
}

.slide5 img {
  position: relative;
  margin-right: auto;
  margin-left: auto;
}

.slick-slide {
  width: 300px
}

.slick-slide img {
  max-width: 100%;
  height: auto;
  min-width: 200px;
  min-height: 150px;
}

@media(max-width:800px) {
  .slick-slide img {
    width: 100%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<div class="slideslick">
  <div class="slidercontent1">
    <div class="slide1">
      <img draggable="false" src="https://placehold.it/500x200">
    </div>
  </div>
  <div class="slidercontent2">
    <div class="slide2">
      <img draggable="false" src="https://placehold.it/500x200">
    </div>
  </div>
  <div class="slidercontent3">
    <div class="slide3">
      <img draggable="false" src="https://placehold.it/500x200">
    </div>
  </div>
  <div class="slidercontent4">
    <div class="slide4">
      <img draggable="false" src="https://placehold.it/500x200">
    </div>
  </div>
  <div class="slidercontent5">
    <div class="slide5">
      <img draggable="false" src="https://placehold.it/500x200">
    </div>
  </div>
</div>

圆滑的轮播图片无法缩放

1 个答案: