Flickity 如何使轮播根据图像大小调整大小？答案

【问题标题】：Flickity How to make the carousel resize based on image size?Flickity 如何使轮播根据图像大小调整大小？
【发布时间】：2022-02-11 06:06:50
【问题描述】：

我正在尝试实现类似于下图的效果。

蓝色 = 轮播幻灯片（作为图像）

绿色 = 轮播框架/视口/容器

红色 = 可见页面 (1440)

我有 5 张图片，均具有相同的分辨率 (1024x576)，我希望它们在根据屏幕尺寸放大/缩小的同时保持比例。

我现在已经为此花费了几个小时，但我无法实现我想要的。

我不想使用他们网站上大多数演示中显示的固定高度，因为缩小到更小的设备时会出现问题。

我发布此问题的原因是，每当我尝试使用除固定高度以外的任何东西时，整个轮播都会崩溃，即使使用 AdaptiveHeight: true 和/或 setGallerySize: false 也是如此。

如果有帮助的话，我也会使用顺风。

感谢任何帮助。

【问题讨论】：

标签： flickity

【解决方案1】：

也许你可以只通过 css 调整像这个演示这样的图像：

.carousel img {
  display: block;
  height: 200px;
}

【讨论】：

【解决方案2】：

.carousel-cell {
  min-height: 100%;
  width: 100%;
}

.carousel-cell img {
  width: 100%;
}

在.carousel-cell 样式上使用min-height 而不是height 似乎有助于避免干扰Flickity 的内部计算。

【讨论】：