Comment maintenir le rapport hauteur/largeur Div en fonction de la hauteur à l'aide de CSS ?

Maintenir le rapport d'aspect Div basé sur la hauteur à l'aide de CSS

Dans certains scénarios, vous devrez peut-être vous assurer que la largeur d'un élément reste un pourcentage de sa hauteur, quelle que soit la variabilité de la hauteur. Bien qu'une solution JavaScript existe pour cela, CSS peut également fournir une approche élégante.

Pour y parvenir, utilisez la propriété aspect-ratio :

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

Voici où la propriété aspect-ratio est vraiment brille :

• Il établit une relation fixe entre la hauteur et la largeur d'un élément.
• En conséquence, le rapport hauteur/largeur de la boîte (dans ce cas, 2:1) est maintenu quel que soit la hauteur de la fenêtre change.

Cette solution garantit que la largeur de l'élément est toujours à 50 % de sa hauteur, même lorsque la fenêtre est redimensionnée verticalement.

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!