具有固定背景的光滑滑块溢出，如何防止幻灯片上的图像裁剪？答案

【问题标题】：Overflow for slick slider with fixed background, how to prevent image cropping on slide?具有固定背景的光滑滑块溢出，如何防止幻灯片上的图像裁剪？
【发布时间】：2022-01-20 13:18:52
【问题描述】：

有一个风格化的滑动滑块，图像应该超出上边框：同时，对于 .slick-list 我有一个背景设置（这是固定的，只有内容被滚动 - 文本、图片和按钮）：如何防止图片被裁剪？

【问题讨论】：

你的图片是怎么来的，是背景图片还是来自 HTML img 标签？如果是背景图片，可以试试background-size :cover。
你说的是顶部的裁剪还是 CUTTING？如果切割.home-slider .slick-list { overflow: visible; overflow-x: clip; }
@Alex，我说的是顶部切割。照你说的做，还是会被剪掉：i.ibb.co/B676Dhm/2021-12-17-22-40-41.png此外，如果我们移除属性溢出，图像会停止剪切，但滑块的克隆变得可见：i.ibb.co/Kh9Bnk7/2021-12-17-22-45-28.png
Timur，你能用这个问题创建jsfiddle或codepen并分享一个链接吗？
@Alex，这里：dev.web-tim.ru

标签： html css layout z-index slick.js

【解决方案1】：

以下是修复它的步骤

添加到 css

.home-slider .slick-list { overflow: visible !important; } - 您需要重要，因为{overflow: hidden} 将在动画期间添加到元素样式中。左/右克隆应该是可见的

添加新的 CSS 选择器 + 样式

.home-slider.slick-slider {
  position: static;
  overflow: hidden;
}

克隆不应该是可见的。但是底部的按钮和点的位置错误

在您的 html 中将div.home-slider-wrapper 中的div.home-slider 包装（创建父div.home-slider-wrapper）
添加到 CSS

.home-slider-wrapper {position: relative;}

对齐按钮+点，这些元素的位置由.home-slider-wrapper计算

【讨论】：

亚历克斯，非常感谢！我做了你写的一切。盒子阴影开始剪裁一点，我纠正了它。
不客气，человек человеку друг ;)