Comment puis-je conserver les proportions d'une division tout en remplissant tout l'écran du navigateur à l'aide de Pure CSS ?

Maintenir les proportions d'un élément div tout en remplissant la largeur et la hauteur de l'écran CSS

Dans la conception Web, la nécessité de conserver un rapport d'aspect spécifique pour un élément div tout en remplissant simultanément les deux la largeur et la hauteur de l’écran peuvent survenir. Cela présente un défi unique lorsque l'on recherche une solution compatible entre navigateurs utilisant du CSS pur.

Deux approches courantes :

1. Conteneur d'images : Utiliser une image avec le rapport hauteur/largeur souhaité pour agrandir un conteneur div. Cependant, cette méthode peut présenter un comportement incohérent selon les différents navigateurs.
2. Rembourrage inférieur proportionnel : Définition du rembourrage inférieur proportionnellement à la largeur. Malheureusement, cette technique ne tient pas compte de la hauteur et conduit à un défilement vertical excessif.

A Novel Lösung :

Pour surmonter ces limitations, une nouvelle approche utilise le récemment introduction des unités de fenêtre CSS, vw (largeur de la fenêtre) et vh (hauteur de la fenêtre). En incorporant ces unités, nous pouvons ajuster dynamiquement les dimensions du div en fonction de l'espace d'écran disponible.

Extrait de code :

div {
  width: 100vw;
  height: 56.25vw; /* 9/16 = .5625 aspect ratio */
  background: pink;
  max-height: 100vh;
  max-width: 177.78vh; /* 16/9 = 1.778 aspect ratio */
  margin: auto;
  position: absolute;
  top:0;bottom:0; /* vertical center */
  left:0;right:0; /* horizontal center */
}

Principales caractéristiques :

• La largeur du div est définie sur 100 % de la largeur de la fenêtre d'affichage (vw).
• La hauteur est calculée en fonction du rapport hauteur/largeur (56,25 % de la largeur).
• Si la fenêtre d'affichage est plus haute que la hauteur calculée, la hauteur maximale la propriété est définie sur 100vh.
• Si la fenêtre d'affichage est plus large que la largeur calculée, la La propriété max-width est définie sur 1,778vw (dérivée du rapport hauteur/largeur).
• Le positionnement absolu et les marges auto-centrées garantissent que le div est aligné au centre de la fenêtre.

Conclusion :

En tirant parti Unités de fenêtre CSS, nous pouvons obtenir une solution compatible avec tous les navigateurs qui conserve le rapport hauteur/largeur souhaité d'un div tout en remplissant de manière transparente l'espace d'écran disponible à la fois horizontalement et verticalement. Cette approche élimine le besoin de manipulations JavaScript complexes et fournit une solution simple mais efficace pour les mises en page Web réactives.

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!