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

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

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

<div class="aspect-ratio-16-9">
  <img src="images/achilles-color.jpg" alt="Achilles">
</div>

@media (orientation: landscape) {
  .aspect-ratio-16-9 {
  --aspect-ratio: 16/9; /* 56.25% */
  position: relative;
  height: 0;
  padding-bottom: calc(100%/(var(--aspect-ratio)));
  }
	.aspect-ratio-16-9 > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  }
.aspect-ratio-16-9 img {
  padding: 3%;
  background: white;
  z-index: 1;
  }
}

@media (orientation: portrait) {
  .aspect-ratio-16-9 {
  --aspect-ratio: 9/16; /* 177.777% */
  position: relative;
  height: 0;
  padding-bottom: calc(100%/(var(--aspect-ratio)));
  }
  .aspect-ratio-16-9 > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  }
.aspect-ratio-16-9 img {
  padding: 3%;
  background: white;
  z-index: 1;
  }
}