aspect-ratioを使ってサイズがバラバラな画像を縦横比を揃えて表示する

この記事は CSS Advent Calendar 2021 1日目の記事です。
aspect-ratio を使って画像のトリミング表示をしてみました。

やりたいこと

• サイズがバラバラな複数枚の画像を表示サイズを合わせて表示したい。
• レスポンシブで縦と横の比率も揃えたい。
• 画像のトリミングは縦方向も横方向も中央部分が表示できれば良い。

できました

See the Pen responsive trimming image by Beco (@becolomochi) on CodePen.

ざっくり重要なところだけ

HTML の構造

img 要素を div 要素で囲んでいます。

<div class="responsive-image">
  <img src="image.png" alt="image">
</div>

img 要素の親要素の CSS

親要素に overflow と aspect-ratio を指定します。

.responsive-image {
  overflow: hidden;
  aspect-ratio: 5 / 3;
}

img 要素の CSS

img 要素自体には object-fit と縦と横それぞれ 100% を指定しました。
100%を指定する理由は、縦長の画像・横長の画像両方に対応するためです。

.responsive-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

まとめ

padding して position 指定して…よりすっきりしてて良いですね。
最新の Safari で対応したのでどんどん使える状況が増えると良いなと感じました。