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

Posted 2023-03-05

【中文标题】具有固定背景的光滑滑块溢出，如何防止幻灯片上的图像裁剪？

【英文标题】：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

【参考方案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计算

【讨论】：

亚历克斯，非常感谢！我做了你写的一切。盒子阴影开始剪裁一点，我纠正了它。

不客气，человек человеку друг ;)