Comment préserver les proportions des éléments dans les fenêtres variables : un guide détaillé de la propriété « aspect-ratio » ?

Assurer la préservation des proportions dans la fenêtre d'affichage

Dans la conception Web, il est crucial de conserver les proportions des éléments tout en s'adaptant aux dimensions variables de la fenêtre d'affichage. Cela garantit la cohérence entre les différentes tailles et orientations d’écran. Pour parvenir à cette préservation spécifiquement lorsqu'il s'agit d'un élément carré, l'approche CSS suivante peut être implémentée :

Utilisation de la propriété aspect-ratio

À partir de 2022, l'aspect La propriété -ratio offre une solution robuste pour contrôler le rapport hauteur/largeur des éléments. En spécifiant le rapport largeur/hauteur souhaité, cette propriété adapte la taille de l'élément pour maintenir le rapport spécifié. Surtout, l'adaptation de la taille est limitée par la plus petite dimension de la fenêtre d'affichage, répondant ainsi à l'exigence d'ajustement dynamique aux orientations paysage et portrait.

Exemple de mise en œuvre

Pour démontrer la fonctionnalité de la propriété aspect-ratio, le code suivant peut être utilisé :

<code class="html"><div class="ar-1-1">Aspect ratio 1:1</div>
<div class="ar-1-19">Aspect ratio 1:19</div></code>

<code class="css">.ar-1-1 {
  aspect-ratio: 1 / 1;
  background: orange;
}

.ar-1-19 {
  aspect-ratio: 16 / 9;
  background: pink;
}

div {
  max-width: 100vw;
  max-height: 100vh;
  margin-bottom: 5vh;
}</code>

Dans cet exemple, deux divs avec des proportions distinctes (1:1 et 16:9) sont créés. La propriété de rapport d'aspect garantit que, quelle que soit l'orientation de l'appareil, ces div conservent la forme et la taille souhaitées dans la fenêtre d'affichage. De plus, leurs dimensions sont ajustées pour s'adapter à la plus petite dimension de la fenêtre, garantissant ainsi que la forme carrée est préservée.

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!