swiper幻灯片图像的填充

Posted 2023-05-08

【中文标题】swiper幻灯片图像的填充

【英文标题】：Padding of swiper slide image

【发布时间】：2022-01-08 22:06:54

【问题描述】：

我有一个全屏滑动器，其中包含一堆图像作为幻灯片，如下所示：

    <div class="swiper-slide"><div class="swiper-image"><img src="..."></div></div>

使用此设置（标准 swiper css），图像最大全宽和全高。 我想给图像一个填充，以便分页和箭头永远不会与图像重叠。这适用于宽度（如果不是 swiper-slide == flex，则适用于顶部）但不适用于高度。

我不确定为什么高度的填充被吃掉/没有效果？高度不会缩放图像。

jsfiddle example

【参考方案1】：

设置图像的尺寸可能有点违反直觉。但是，在您的情况下，设置填充不会改变图片的大小，因此它实际上溢出了它的边界框。如果您在 chromium 浏览器中，请右键单击图像并选择 Inspect element；这将向您显示真实尺寸。

您需要设置图像的大小，而不是填充。要使用百分比，您需要确保父 div 也设置了其大小。如果你把.swiper-image和.swiper-image img的css定义改成

.swiper-image 
  height: 100%;
  display: flex;  
  justify-content: center;
  align-items: center;


.swiper-image img 
  display: block;
  max-height: 80%;
  max-width: 90%;

这样能达到你想要的效果吗？

【讨论】：

非常感谢 - 刚刚调整它以使用 max-width: calc(100% - pixel) 来获得精确的像素填充...