Swiper js尊重图像纵横比

Question

在这个 Swiper 演示中，如何让它始终遵循原始图像的宽高比？ （在这种情况下平方 1:1 比率）

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

Answer 1

在您的 style.css 中，如果您不介意空白 space，您可以调整 .swiper-slide class 以使用 background-size 包含而不是覆盖在图像的两侧。

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;
}