Mit der Eigenschaft aspect-ratio
behält der grüne visuelle Block das Seitenverhältnis 16:9 bei, wenn Sie die Größe der Karte ändern. Wir halten das Seitenverhältnis mit aspect-ratio: 16 / 9
ein.
.video {
aspect-ratio: 16 / 9;
}
Wenn du ohne dieses Attribut ein Seitenverhältnis von 16:9 beibehalten möchtest, musst du einen padding-top
-Hack verwenden und ein 56.25%
-Abstand für das Verhältnis zwischen Höhe und Breite festlegen. Demnächst wird es ein Attribut dafür geben, um den Hack zu vermeiden und die Berechnung des Prozentsatzes zu vereinfachen. Sie können ein Quadrat mit dem Seitenverhältnis 1 / 1
, ein Seitenverhältnis von 2:1 mit 2 / 1
oder einfach alles andere erstellen, was Sie für dieses Bild benötigen, um es mit einem festgelegten Größenverhältnis zu skalieren.
.square {
aspect-ratio: 1 / 1;
}
<div class="parent">
<div class="card">
<h1>Video Title</h1>
<div class="visual"></div>
<p>Descriptive Text goes here</p>
</div>
</div>
.parent {
display: grid;
place-items: center;
}
.visual {
aspect-ratio: 16 / 9;
}
.card {
width: 50%;
display: flex;
flex-direction: column;
padding: 1rem;
}