【css】swiperで画像比率を保ったままコンテナ要素に合わせて表示する方法

※ 当サイトではアフィリエイト広告を利用しています。

swiperで、pcとspで画像の縦横比率を変えたいときに使える方法です。
デフォルトでは画像比率を保ったまま伸縮しますよね。
例えばpcでは画像比率のままで表示、
スマホでは同じ画像を使って高さを画面いっぱいに表示させ、横幅は狭めたい…
こんな場合、画像比率を保ったままコンテナのサイズに合わせて表示させることができるのが以下のコード。

.swiper-container,
.swiper-slide {
   height: 100vh;
}
.swiper-slide > img {
   object-fit: cover; /* IE: not support */
   width: 100%;
   height: 100%;
}