如何调整光滑轨道上图像的宽度

Question

我对 slick.js 的宽度有疑问，其中 slick-track 上的框超出了网站上的页面。

请注意我上传的图片：

对于我的程序代码的使用大致是这样的：

jQuery('.image-slider').slick({
  slidesToShow: 1.7,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
  arrows: false,
  dots: false,

});

.image-slider .slick-slide {
  margin: 0 2px;
  display: inline-block;
}

.image-slider a {
  display: block;
  width: 100%;
}

.image-slider img {
  width: 860px;
  height: auto;
  margin-top: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class='image-slider'>
  <div class='overlay-container'>
    <a href='#'><img src='http://www.sixteenconsulting.com/sixteenblog/wp-content/uploads/2017/10/veille_complexe-800x533.jpg' />
      <div class='overlay'>
        <div class='text' />
      </div>
    </a>
  </div>
  <div class='overlay-container'>
    <a href='#><img src=' http://www.herbusiness.co.ke/wp-content/uploads/2017/10/battlefield_africa_winners-800x533.jpg '/>
      <div class='overlay '>
          <div class='text '/>
        </div>
     </a>
                                      </div>
     <div class='overlay-container '>
        <a href='# '><img src='https://disrupts.com/wp-content/uploads/2016/08/00948135202729.56ed9d795bc5b-2-800x533.jpg '/>
      <div class='overlay '>
          <div class='text '/>
        </div>
     </a>
          </div>
    </div>

Answer 1

我自己好久都无法解决这个问题。我正在更改

 <img width="200px" href="myimage.png">

在 div 中，但这没有用。另外我正在使用表格，所以它更加复杂。这会在图像后产生很多白色 space。

因为整个事情都是响应式的，所以您需要使用 width 和百分比 来使它们正常工作，以便它随着您更改屏幕宽度而缩放。

 <img width="100%" href="myimage.png">

或屏幕的某个百分比。

如何调整光滑轨道上图像的宽度

How to adjust width of the image on the slick-track

html

javascript

css

jquery

slick.js