Fiche au format image

Avec la propriété aspect-ratio, lorsque vous redimensionnez la fiche, le bloc visuel vert conserve ce format 16:9. Le format aspect-ratio: 16 / 9 est respecté.

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

Pour conserver le format 16:9 sans cette propriété, vous devez utiliser une astuce padding-top et lui attribuer une marge intérieure de 56.25% pour définir un rapport haut/largeur. Nous disposerons bientôt d'une propriété permettant d'éviter le piratage et de devoir calculer le pourcentage. Vous pouvez créer un carré avec un ratio de 1 / 1, un ratio de 2:1 avec 2 / 1, et tout ce dont vous avez besoin pour que cette image soit mise à l'échelle avec un ratio 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;
}