Garantir 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 mise en œuvre :

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é :

Aspect ratio 1:1
Aspect ratio 1:19

.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;
}

Dans cet exemple, deux div 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.