在 Flickity 滑块上垂直居中所有照片答案

【问题标题】：Vertically Centering All Photos on Flickity Slider在 Flickity 滑块上垂直居中所有照片
【发布时间】：2022-08-14 04:12:06
【问题描述】：

构建一个 flickity 轮播看起来像 this 并且在我的 CodePen 上存在一些间距问题。

看起来不错，但希望减少幻灯片之间的间距，并且间距相当相等，但不是 100% 相等。例如，它说间距为 10%，但如果您将更多的垂直照片背靠背放置，请参阅此图像以获取不同宽度的像素的近似间距 (pic)

图片应该是<img src=\"x\">，而不是背景图片，以便访问和添加alt标签。

任何人在代码中都有关于如何修复它的任何提示，以便图像看起来更大，然后占用更多空间（因此幻灯片之间的空间更小），并确保我放在那里的任何图像之间的水平间距相等他们？在附加的示例中似乎非常接近。我尝试在第一个上弄乱填充/宽度，但它变得很奇怪。

【解决方案1】：

从图像中删除height: 100%，只留下width: 100%，这样所有图像都将具有相同的水平空间。

并使用.ui-thumbnail-img 将图像居中放置在其中。

我为解决方案创建了一个 jsfiddle。 https://jsfiddle.net/vzphr3n5/3/

【讨论】：