CODEWITHSUNDEEP
javascriptcssswiper.js
Oliver
Oliver

Reputation: 851

Padding of swiper slide image

I have a fullscreen swiper which contains a bunch of images as slides like this:

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

With this setup (standard swiper css) the images are max full width and full height. I would like to give the image a padding so that the pagination and the arrows never overlap the image. This works for the width (and for top if not swiper-slide == flex) but not for the height.

I'm not sure why the padding for the height gets eaten up / has no effect? the height doesn't scale the image.

jsfiddle example

Upvotes: 0

Views: 3806

Answers (1)

Dominic Price
Dominic Price

Reputation: 1146

Setting dimensions for images can be a bit counter-intuitive. In your case though, setting the padding won't change the size of the picture and so it is actually overflowing out of it's bounding box. If you are in a chromium browser, right click the image and select Inspect element; this will show you the true dimensions.

You need to set the size of the image, instead of the padding. To use percentages, you need to make sure that the parent div also has its size set. If you change the css definitions of .swiper-image and .swiper-image img to

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

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

does this achieve the effect that you want?

Upvotes: 1

Related Questions