Aspect Ratio

Definition

Propriété aspect-ratio qui maintient un rapport largeur/hauteur fixe sur un élément. Remplace le hack du padding-top en pourcentage pour les conteneurs responsives.

Analogie

Comme un cadre photo qui garde toujours les mêmes proportions, quelle que soit sa taille.

Exemple de code

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.avatar {
  aspect-ratio: 1;
  border-radius: 50%;
}

Cas d'usage

Maintenir les proportions des vidéos, images et cartes sans le hack du padding-bottom.

Anti-pattern

Termes lies