アスペクト比の画像カード

aspect-ratio プロパティを使用すると、カードのサイズを変更しても、緑色のビジュアル ブロックでこの 16 x 9 のアスペクト比が維持されます。aspect-ratio: 16 / 9 ではアスペクト比が尊重されます。

.video {
  aspect-ratio: 16 / 9;
}

このプロパティを使用せずに 16 x 9 のアスペクト比を維持するには、padding-top ハックを使用してパディングを 56.25% にして、上下の比率を設定する必要があります。ハッキングを回避し、割合を計算する必要性を避けるため、まもなくそのためのプロパティが用意される予定です。比率が 1 / 1 の正方形、2 / 1 で 2 対 1 の正方形など、この画像を設定されたサイズ比率で拡大縮小するために必要なものをすべて作成できます。

.square {
  aspect-ratio: 1 / 1;
}

HTML

<div class="parent">
  <div class="card">
    <h1>Video Title</h1>
    <div class="visual"></div>
    <p>Descriptive Text goes here</p>
  </div>
</div>

CSS

        .parent {
  display: grid;
  place-items: center;
}

.visual {
  aspect-ratio: 16 / 9;
}

.card {
  width: 50%;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}