滑动滑动图像的填充

Padding of swiper slide image

我有一个全屏滑动器,其中包含一堆图像,如下所示:

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

使用此设置(标准滑动器 css),图像是最大全宽和全高。 我想给图像一个填充,这样分页和箭头就不会与图像重叠。这适用于宽度(如果不是 swiper-slide == flex,则适用于顶部)但不适用于高度。

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

jsfiddle example

设置图像尺寸可能有点违反直觉。但在您的情况下,设置填充不会改变图片的大小,因此它实际上溢出了它的边界框。如果您使用的是 chromium 浏览器,请右键单击图像并 select 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%;
}

这样可以达到你想要的效果吗?