La propriété aspect-ratio permet de créer un élément dont la dimension reste proportionnelle, peu importe son contexte. Ainsi, la hauteur ou la largeur d’un élément est calculée à partir d’un ratio fourni.
Par exemple, pour obtenir un élément parfaitement carré, il est possible de spécifier:
aspect-ratio: 1 / 1;
La première valeur du ratio correspond à la largeur tandis que la deuxième correspond à la hauteur width / height.
Valeurs
auto(par défaut) l'élément s'affiche selon son contenu, sans se soucier d'un ratio en particulier.16 / 9(ou n'importe quelle fraction)
Width & Height
Lorsque aspect-ratio et une seule des propriétés width ou height sont définis, la deuxième s'ajuste automatiquement en fonction du ratio spécifié.
Cependant, si les propriétés width et height sont définies, la propriété aspect-ratio et sa valeur seront ignorées.
Contenu
Si le contenu d'un élément nécessite un espace plus grand que celui défini par aspect-ratio, l'élément s'étirera, brisant ainsi le ratio spécifié.
Pour contourner ce problème, il est possible de spécifier min-height: 0; à l'élément afin de donner priorité à au ratio plutôt qu'au contenu.