Comment maintenir le rapport hauteur/largeur d'une division en fonction de sa hauteur à l'aide de CSS ?

Maintenir les proportions d'un élément en fonction de la hauteur à l'aide de CSS

Quand il s'agit de conserver les proportions d'un élément, la solution traditionnelle consiste à utiliser une valeur en pourcentage pour le remplissage vertical. Cependant, obtenir le même effet avec un remplissage horizontal n’est pas aussi simple. Cet article explore une approche basée sur CSS pour préserver les proportions d'un élément div en fonction de sa hauteur.

La structure de balisage souhaitée est la suivante :

<div class="box">
  <div class="inner"></div>
</div>

Pour conserver les proportions , nous pouvons exploiter la propriété CSS aspect-ratio :

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

La propriété aspect-ratio spécifie le rapport entre la largeur et la hauteur de l'élément. Dans ce cas, un rapport de 2:1 indique que la largeur sera deux fois supérieure à la hauteur.

En définissant la hauteur de l'élément parent (boîte) sur une valeur fluide (par exemple 50 %) et en ajustant sa propriété de rapport d'aspect, nous pouvons garantir que sa largeur évolue proportionnellement à la hauteur.

Pour démontrer l'effet, vous pouvez considérer le code HTML et CSS suivant :

<code class="html"><div class="demo">
  <div class="box">
    <ul>
      <li>This box has fluid height of 50%</li>
      <li>It has an aspect ratio of 2:1</li>
      <li>Resize the container vertically (or horizontally)</li>
      <li>The box will maintain its aspect ratio</li>
      <li>The text content will not affect its width</li>
    </ul>
  </div>
</div></code>

<code class="css">.demo {
  width: 90vw;
  height: 90vh;
  overflow: auto;
  resize: both;
  outline: 1px solid #999;
}</code>

Le redimensionnement du conteneur (.demo) démontrera que la boîte (box) ajuste sa largeur tout en conservant son rapport hauteur/largeur 2:1. Cette solution fournit un moyen propre et efficace de préserver les proportions souhaitées d'un élément uniquement via CSS.

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!