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

やりたいこと

できました

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

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

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

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

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

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

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