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

Question

我有关于slick.js宽度的问题。光滑轨道上的框超出了网站上的页面。

请注意我上传的图片：

使用我的程序代码或多或少像这样：

＆＃13;

＆＃13;

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

});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我自己也无法解决这个问题。我正在改变

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

在div中，但是没有用。我也使用表格，因此它更复杂。这可以在图像之后创建大量的空白区域。

因为整个内容都是响应式的，您需要使用宽度和百分比才能使它们正常工作，以便在您更改屏幕宽度时进行缩放。

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

或屏幕的某个百分比。