Maintenir le rapport d'aspect des divisions en fonction de la hauteur

Maintenir la largeur d'un élément en pourcentage de sa hauteur peut être difficile. Alors que l'utilisation d'une valeur en pourcentage pour padding-top peut produire l'effet inverse, padding-left en pourcentage dépend de la largeur de l'objet, et non de sa hauteur.

Pour résoudre ce problème, CSS introduit la propriété aspect-ratio, offrant une solution élégante pour maintenir un rapport hauteur/largeur cohérent en fonction de la hauteur. L'extrait de code suivant illustre son utilisation :

.box {
  height: 50%;
  background-color: #3CF;
  aspect-ratio: 2 / 1;
}

Dans cet exemple, l'élément .box a une hauteur fluide de 50 % et un rapport hauteur/largeur de 2:1. Lorsque la hauteur du conteneur change, la hauteur et la largeur de la boîte s'ajustent en conséquence, préservant ainsi ses proportions.

La propriété aspect-ratio garantit que la largeur de la boîte reste proportionnelle à sa hauteur, quel que soit le contenu du texte ou la taille du conteneur. . Cela élimine le besoin de solutions JavaScript complexes et fournit une approche propre et efficace, uniquement CSS, pour maintenir les proportions.