我来帮你搞定这个图片裁切的问题～从你的描述和代码来看，核心问题在于开启centerMode后，滑块的容器逻辑加上图片的尺寸适配没做好，导致窗口缩小后图片被裁切。下面给你几个可行的解决方案：

方案一：通过CSS调整<img>标签的显示方式 #

这个方法不需要修改HTML结构，只需要给图片和容器加样式，让图片在容器内居中完整显示，同时保持比例：

/* 确保图片容器占满slide的空间 */
.main-slider__slide_img {
  width: 100%;
  height: 100%; /* 可以设置固定高度，比如500px，根据你的需求调整 */
}

/* 让图片自适应容器，居中且不裁切 */
.main-slider__slide_img img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 关键属性：保持图片比例，完整显示在容器内，不会裁切 */
  object-position: center center; /* 确保图片在容器内水平垂直居中 */
}

如果希望图片铺满容器但允许留白（不裁切），object-fit: contain是最佳选择；如果后续需要铺满容器只裁切超出部分，可以改成object-fit: cover，不过这不符合你当前避免裁切的需求。

方案二：调整Slick滑块的初始化参数与容器样式 #

开启centerMode后，Slick会默认给.slick-slide设置一个小于容器的宽度，这可能导致图片显示空间不足。我们可以覆盖这个样式，让slide宽度和容器一致：

/* 强制slide宽度等于容器宽度，避免centerMode导致的偏移裁切 */
.slick-slide {
  width: 100% !important;
}

同时，你可以检查初始化参数里的centerPadding，既然你设置的是0px，如果不需要centerMode的居中效果，也可以直接把centerMode: true改成false，这样滑块的布局逻辑会更简单，也能减少裁切的概率。

方案三：改用背景图方式显示图片 #

如果上面的方法效果不理想，可以把<img>标签换成背景图，通过CSS背景属性更灵活地控制显示：

修改你的HTML结构（去掉<img>，用背景图）：

<div id="main-slider">
  <div class="main-slider__slide">
    <div class="main-slider__slide_img" style="background-image: url('你的图片地址')"></div>
  </div>
</div>

然后添加对应的CSS：

.main-slider__slide_img {
  width: 100%;
  height: 500px; /* 根据你的需求设置高度 */
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

这种方式同样能让图片居中完整显示，不会被裁切，而且避免了<img>标签可能带来的尺寸适配问题。

你可以根据自己的实际布局需求选择其中一种方案，优先试试方案一，改动最小且效果直接～

内容的提问来源于stack exchange，提问作者Yaroslav Saenko