【CSS】画面幅に関わらず画像の比率を保たせる「aspect-ratio」の使い方を解説

「画面幅が狭くなると画像が歪んでしまう。。」

今回はそれを一発で解決するCSSの実装方法をご紹介します。

実装方法

See the Pen Untitled by masata (@masata_lm) on CodePen.

.box__img {
  width: 300px;
  aspect-ratio: 5 / 3;
}

ポイントはaspect-ratioというプロパティを使っているところです。

今回だと5:3の比率を常に保って表示されるようになります。
例えば、7:10の比率にしたければ、

aspect-ratio: 5 / 3;

と実装すればOKです！