Comment puis-je conserver les proportions d'un élément en fonction de sa hauteur ?

Maintenir le rapport d'aspect Div basé sur la hauteur

Maintenir la largeur d'un élément en pourcentage de sa hauteur peut être un défi. 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 démontre son utilisation :

<code class="CSS">.box {
  height: 50%;
  background-color: #3CF;
  aspect-ratio: 2 / 1;
}</code>

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!