Javascript 如何使滑动条高度灵敏？

我有一个工作光滑的滑块（），但不能得到高度的反应。无论我将浏览器缩小到什么大小，图像始终保持相同的高度。我原以为“mobileFirst”设置可以解决这个问题，但似乎没有。有人知道如何使滑块和其中的图像响应吗？这是我的密码：

贝利·米勒
身体{
背景：黑色；
}
$（文档）.ready（函数（）{
$（'.可变宽度'）。光滑({
mobileFirst：没错，
无限：是的，
速度:300,，
幻灯片放映：1，
centerMode:false，
可变宽度：true，
焦点选择：正确
});
});

我不太清楚Slick Slider的标记效果如何，但当我使用类似的js插件时，我不得不添加另一个函数来强制浏览器在调整窗口大小时重新绘制图像

以下是我使用的功能：

var debounceTimeout;
$(window).on("resize", function(){
    clearTimeout(debounceTimeout);
    debounceTimeout = setTimeout(function(){
        $(".ps-current img:visible").css("max-height","99.9%");
        setTimeout(function(){
            $(".ps-current img:visible").removeAttr("style");
        }, 10)
    }, 300);
});

图像的CSS只是：

.slider img {
    max-width: 100%;
    max-height: 100%;
}

请记住，要为元素指定相对高度（以百分比表示的高度），其父元素必须具有定义的高度

---

要使一个元素占据浏览器的100%，该元素及其所有父元素（最多为

body

和

html

）需要具有

高度：100%在他们的css样式中。
我也有同样的问题-删除可变宽度解决了问题，并将内容缩放到浏览器窗口。通过响应选项，您可以为不同断点的插件提供不同的选项。因此，您可以保持较大屏幕的可变宽度，并在需要响应时进行相应更改

$(document).ready(function(){
    $('.variable-width').slick({
          mobileFirst: true,
          infinite: true,
          speed: 300,
          slidesToShow: 1,
          centerMode: false,
          variableWidth: false,
          focusOnSelect: true,
          responsive: [
                {
                  breakpoint: 1024,
                  settings: {
                      mobileFirst: true,
                      infinite: true,
                      speed: 300,
                      slidesToShow: 1,
                      centerMode: false,
                      variableWidth: true,
                      focusOnSelect: true

                  }
                }
              ]
    });
});

我找到了关于该问题的以下页面：
如果您知道图像的宽度和高度，请计算图像的纵横比并创建一个变量：

$aspectRatio: width / height;

然后您可以使用这个简单的解决方案：

.slick-slider{ max-width: calc(100vh * #{$aspectRatio});}

这使滑块宽度根据视口高度而变化，滑块高度将按比例变化。只需根据需要更改值。
我使用了

.slick-slide img{max-width: 60vw;}

调整“最大宽度”（max width）以找到特定项目的良好平衡

与Slick的响应断点结合使用可获得更好的结果。
尝试这些代码

$('.mySlides').slick({<br>
      autoplay:true,<br>
      dots: true,<br>
      infinite: true,<br>
      speed: 300,<br>
      slidesToShow: 1,<br>
      responsive: [{breakpoint:1024},{breakpoint:600}]<br>
      });<br><br>
 $('.mySlides').on('breakpoint', function(event, slick, breakpoint){<br>
    $('.slick-slide').css('height',$('.slick-current img').height());<br>
 });

$（'.mySlides'）.slick（{

自动播放：正确，

圆点：正确，

无限：正确，

速度：300，

幻灯片放映：1，

响应：[{断点：1024}，{断点：600}]

});


$（'.mySlides'）。在（'breakpoint'，函数（event，slick，breakpoint）{

$（'.slick slide'）.css（'height'，$（'.slick current img'）.height（））；

});
adaptiveHeight:true？我不熟悉Slick，但您真的想覆盖CSS中所有这些特定于Slick的样式吗？弄乱一个库的CSS是很棘手的，很可能你无意中破坏了Slick应该处理的自适应高度魔法。另外，你想要可变高度，对吗？不是可变宽度吗？这是正确的吗？在页面上光滑的标记中，有一个具有显式高度的div，它将阻止图像缩放：
如果删除此样式并推进滑块，它将重新添加显式高度hmm，我仍然无法使其工作。我不知道这个插件文件中的css类来自何处，或者哪个类做什么。使用chrome中的DOM检查器来确定哪些元素是哪些元素。在元素上单击鼠标右键，然后单击“检查元素”以在检查器中查看它。被低估的回答欢迎使用StackOverflow！请考虑对你的答案做一个简短的解释。StackOverflow是一个帮助人们进一步提高技能的网站，而不仅仅是一个代码共享平台。留下解释有助于他们理解如何解决问题。：）