光滑的轮播不允许图像正确缩放

时间:2017-07-04 11:07:25

标签: html css slick.js

我使用光滑来制作图像轮播。我已经有了它的工作但我希望能够拥有中心图像比例并且比其他图像更大。我有点工作,但是当图像缩放意味着图像在容器外部流动并且没有正确地按比例缩放时,容器的高度不会改变。我想让它像中心模式http://kenwheeler.github.io/slick/

的演示一样工作

如何在缩放图像时获得更改高度?

1 个答案:

答案 0 :(得分:2)

如果您仔细查看他们的演示并增加比例尺,那么您可以看到,即使在他们的演示中,白框也会被裁剪。

解决方案是给幻灯片留一个边距,这样就可以看到中心图像​​。以下代码将帮助您实现您想要的目标:

.slick-slide {
    margin: 50px 0;
}

我所做的只是增加保证金的上下。最终结果是幻灯片上方和下方的空白区域不活动,但空白区域被中心幻灯片中的缩放图像覆盖。

工作代码表: https://codepen.io/vikrant-icd/pen/vZjMPq