Javascript 光滑的旋转木马不适应快速响应的图像

我想使用光滑的旋转木马与一些图像，将根据屏幕的宽度调整大小，然而，虽然图像是响应，旋转木马总是充满整个页面

这是我的密码：

HTML:

CSS:

---

我尝试过使用.slide类，但似乎无法使其正常工作。

您必须强制slick调整大小：

$(window).resize(function() {
  $('.js-slider').slick('resize');
});

$(window).on('orientationchange', function() {
  $('.js-slider').slick('resize');
});

或者这可能更短：

$(window).on('resize orientationchange', function() {
  $('.js-slider').slick('resize');
});

---

“旋转木马始终填充整个页面”-请详细解释，旋转木马将填充整个视口宽度，无论断点如何，除非仅限于容器或存在我们无法看到的其他css/js。另外，请将其放置在JSFIDLE或CodePen@Ben我上传了一个屏幕截图，这样你可以看到。幻灯片容器并添加了边框，使其更清晰。我希望.slide容器始终适合图像的高度和宽度。

.slide{ 

}

img{
    max-width: 50%;
    height: auto;
}

$(window).resize(function() {
  $('.js-slider').slick('resize');
});

$(window).on('orientationchange', function() {
  $('.js-slider').slick('resize');
});

$(window).on('resize orientationchange', function() {
  $('.js-slider').slick('resize');
});