javascript - 如何根据内容调整 Flickity 轮播的高度？

Question

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

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

你有什么解决方案吗？非常感谢

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

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

Answer 1

在没有看到代码的情况下，我无法真正建议如何更改 flickity css，但我建议将容器上的 padding-bottom 或 flickity 内容上的 margin-bottom 从百分比 (%) 更改为像素 (px) 如果你希望它保持不变。

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

<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>