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

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

Mary-Kate Olsen
Libérer: 2024-10-28 20:45:02
original
444 Les gens l'ont consulté

How to Preserve Aspect Ratio of Elements in Variable Viewports: An In-Depth Guide to the `aspect-ratio` Property?

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>
Copier après la connexion
<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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal