Maison > interface Web > tutoriel CSS > Comment conserver les proportions d'une division en fonction de la largeur et de la hauteur ?

Comment conserver les proportions d'une division en fonction de la largeur et de la hauteur ?

Barbara Streisand
Libérer: 2024-10-31 02:54:02
original
367 Les gens l'ont consulté

How to Maintain Aspect Ratio of a Div Based on Width and Height?

Maintenir les proportions en fonction de la largeur et de la hauteur

Lorsque l'on s'efforce de positionner un div carré centré dans la fenêtre, la question se pose : comment préserver efficacement ses proportions tout en considérant à la fois les dimensions de largeur et de hauteur ?

L'avènement de la propriété CSS aspect-ratio en 2022 offre une solution complète à ce défi. Cette propriété permet aux développeurs de conserver n'importe quel rapport hauteur/largeur par rapport à la taille de la fenêtre d'affichage ou à l'élément parent.

Pour atteindre notre objectif de maintenir le rapport hauteur/largeur basé sur les dimensions de la fenêtre d'affichage, le code CSS suivant peut être utilisé :

<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

Cet extrait de code illustre deux formats d'image : 1:1 et 1:19, respectivement. Les éléments div utilisant ces proportions ajusteront automatiquement leurs dimensions pour conserver ces proportions dans la fenêtre d'affichage, garantissant ainsi une apparence visuelle cohérente quelle que soit la taille ou l'orientation de la fenêtre.

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