Swiper js уважает соотношение сторон изображения

#css #swiper

#css #swiper.js

Вопрос:

Как я могу сделать так, чтобы в этой демонстрации Swiper всегда соблюдалось соотношение сторон исходного изображения? (в данном случае квадратное соотношение 1: 1)

https://stackblitz.com/edit/swiper-demo-30-thumbs-gallery-myq76w?file=index.html

Ответ №1:

В вашем style.css вы можете настроить .swiper-slide класс, чтобы использовать background-size contain вместо cover, если вы не возражаете против пустого пространства по бокам изображения.

https://stackblitz.com/edit/swiper-demo-30-thumbs-gallery-s2knwx?file=style.css

 .swiper-slide {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}