メディアクエリを使ってポートレイトとランドスケイプでアスペクト比を使い分ける

アスペクト比を有効活用する事例。画像をポートレイトとランドスケイプで表示させるとき、アスペクト比を別々に設定して見え方を考慮する。

上の画像はランドスケイプは 2 / 1、ポートレイトは 1 / 3 に設定してある。

<img src="images/achilles-color.jpg" alt="Achilles" class="property-aspect-ratio-2-1">

@media (orientation: landscape) {
.property-aspect-ratio-2-1 {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  }
}
@media (orientation: portrait) {
.property-aspect-ratio-2-1 {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  }
}