Bildkarte für das Seitenverhältnis

Wenn Sie die Größe der Karte mithilfe der Eigenschaft aspect-ratio ändern, behält der grüne visuelle Block das Seitenverhältnis von 16 x 9 bei. Das Seitenverhältnis von aspect-ratio: 16 / 9 wird beibehalten.

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

Wenn Sie ein Seitenverhältnis von 16 x 9 ohne diese Eigenschaft beibehalten möchten, müssen Sie einen padding-top-Hack verwenden und einen Abstand von 56.25% festlegen, um ein Verhältnis von oben zur Breite festzulegen. Wir werden bald eine Property dafür haben, um den Hack zu vermeiden und den Prozentsatz zu berechnen. Sie können ein Quadrat mit dem Seitenverhältnis 1 / 1, ein Seitenverhältnis von 2:1 mit 2 / 1 und praktisch alles erstellen, was Sie brauchen, um dieses Bild mit einem festgelegten Seitenverhältnis zu skalieren.

.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;
}