如何使Flickity轮播的高度受内容限制？

Question

我正在尝试名为Flickity的组件，它很酷，但是问题是，轮播的高度很难在CSS中定义，并且不能占用carousel-cell中内容的高度。我尝试使用选项setGallerySize: false，但不起作用。

我有一个移动优先的网站，其内容会根据设备的不同而缩小，我希望Flickity轮播能够与内容高度匹配。

请问您有什么解决方案吗？ 非常感谢

桌面渲染（请参见卡片下方的空间）：

移动视图渲染（请参见卡片下方的空间）：

Answer 1

在没有看到代码的情况下，我无法真正建议如何更改灵活性CSS，但我建议将容器的浮动性或填充边缘或填充性边缘的底部从百分比（％）更改为像素（ px），如果您希望它保持不变。

如果您反对使用像素，请尝试使用@media查询来减少在移动设备上显示时容器div上的填充底线：

<style>
.container {
    padding-bottom: 10%;
}
@media screen and (max-width: 500px) { //replace max-width if too high or low
    .container {
        padding-bottom: 5%;
    }
}
</style>

<div class="container">
//content
</div>