Comment conserver le rapport hauteur/largeur d'une division tout en remplissant tout l'écran en CSS ?

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

Pour conserver les proportions d'un div tout en remplissant la largeur de l'écran et la hauteur, nous pouvons utiliser les unités de fenêtre CSS vw (largeur de la fenêtre) et vh (hauteur de la fenêtre). Cette approche garantit que l'élément remplira toujours la taille maximale de la fenêtre d'affichage sans rompre le rapport ni créer de barres de défilement.

FIDDLE

Pure CSS

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 */
}

Ce CSS garantit que le div :

• S'étend pour englober le pleine largeur et hauteur de l'écran (unités vw et vh).
• Maintient un rapport d'aspect de 16:9 (rapport hauteur:largeur de 56,25vw:100vw).
• Empêche le débordement en réglant contraintes maximales de hauteur et de largeur.
• Centre le div verticalement et horizontalement dans la fenêtre d'affichage disponible espace.

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!