Avec la propriété aspect-ratio
, lorsque vous redimensionnez la fiche, le bloc visuel vert conserve ce format 16 x 9. Nous respectons le format avec aspect-ratio: 16 / 9
.
.video {
aspect-ratio: 16 / 9;
}
Pour conserver un format 16 x 9 sans cette propriété, vous devez utiliser un hack padding-top
et lui attribuer une marge intérieure de 56.25%
pour définir un ratio hauteur/largeur. Nous allons bientôt proposer une propriété pour éviter le piratage et le calcul du pourcentage. Vous pouvez créer un carré avec un format 1 / 1
, un format 2 à 1 avec 2 / 1
, et tout ce dont vous avez besoin pour que cette image soit mise à l'échelle avec un format de taille défini.
.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;
}