Comment puis-je conserver les proportions d'une division tout en remplissant tout l'écran avec CSS ?

Maintenir le rapport hauteur/largeur d'un div tout en remplissant la largeur et la hauteur de l'écran avec CSS

Maintenir un rapport hauteur/largeur fixe pour un div tout en garantissant qu'il remplit la largeur et la hauteur de l'écran disponibles sans dépasser les dimensions de chaque côté peut être une tâche délicate en CSS. Pour relever ce défi, nous présentons une solution purement CSS qui exploite les nouvelles unités de fenêtre, vw et vh.

En utilisant vw et vh, nous pouvons définir la largeur et la hauteur du div par rapport à la largeur et à la hauteur de la fenêtre d'affichage. . Cela garantit que le div occupera toujours le maximum d’espace sans rompre les proportions. Pour éviter que le div ne déborde, nous définissons également des contraintes max-height et max-width en utilisant les valeurs de ratio.

Pour centrer le div à la fois verticalement et horizontalement, nous utilisons position: Absolute et le positionnons en haut, bords inférieur, gauche et droit de la fenêtre. Cela garantit que le div restera centré quelle que soit la taille de l'écran.

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

Cette solution s'adapte aux différentes tailles d'écran tout en conservant le rapport hauteur/largeur 16:9 souhaité. Redimensionnez la fenêtre verticalement ou horizontalement, et le div s'ajustera en conséquence, occupant l'espace maximum sans barres de défilement ni distorsion.

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!