Jquery 光滑的旋转木马图像不垂直安装在屏幕上，也不垂直居中

我使用Slick jquery carousel库来显示延迟加载的单个图像

图像加载和显示正常，水平安装屏幕，水平居中

我遇到的问题是，我无法使图像垂直缩小以适应屏幕（当图像大于屏幕高度时），也无法使图像垂直居中（当图像短于屏幕高度时）

理想情况下，我希望Slick能够响应性地适应上级部门

    $(document).ready(function() {

      $('.image-slider').slick({
        lazyLoad: 'ondemand',
        slidesToShow: 1,
        slidesToScroll: 1,
        initialSlide: 1,
        centerMode: true,
        arrows: false,
        dots: true,
      });

    });

我这里有一堆JS代码。。。

---

如果我没弄错你的问题，你想让光滑的旋转木马适应图像的高度

为此，您可以编辑Javascript并添加此行

adaptiveHeight:true

新的JavaScript应该如下所示：

$(document).ready(function() {
  $('.image-slider').slick({
    lazyLoad: 'ondemand',
    slidesToShow: 1,
    slidesToScroll: 1,
    initialSlide: 1,
    centerMode: true,
    arrows: false,
    dots: true,
    adaptiveHeight: true //add this line
  });
});

---

下面是正在工作的JSFIDLE:

不，这不是问题所在。问题是，如果图像高度超过可用屏幕空间，它不会缩小以适应，而是会出现一个垂直滚动条。（以小兔子和鸭子的图片为例，它从屏幕底部消失。）@Z.Stark好的，在这种情况下，您必须覆盖一些光滑的CSS属性。因为滑动滑块的默认高度设置为

100%

，因此它会呈现图像的大小，这就是图像不会收缩以适应的原因。将滑块的高度设置为固定值，如下所示：

.slick slide{height:300px；}

这将保持滑块的恒定大小，并且滑块内的图像也将收缩以适合carousal高度。下面是正在工作的JSFIDLE:。让我知道这是否有帮助。