Comment conserver les proportions tout en remplissant tout l'écran avec CSS ?

Maintenir les proportions lors du remplissage de la largeur et de la hauteur de l'écran en CSS

Problème :
Création d'un élément div avec un rapport hauteur / largeur fixe qui remplit toute la largeur et la hauteur de l'écran sans dépasser son limites.

Solution :
Utilisez les unités de fenêtre CSS vw et vh pour définir les dimensions du div.

CSS Implémentation :

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

Explication :

• Unités de la fenêtre : vw et vh mesurent les unités par rapport à la largeur de la fenêtre et la hauteur, respectivement.
• Rapport d'aspect : La hauteur est réglée sur 56,25 % de la largeur, en conservant un rapport hauteur/largeur constant de 9:16.
• Dimensions maximales : L'élément est limité dans les dimensions de la fenêtre d'affichage à l'aide de la hauteur maximale et de la largeur maximale.
• Centrage : La propriété position centre l'élément verticalement et horizontalement sur l'écran en utilisant top:0 ; bas : 0 ; et à gauche : 0 ; right:0;.

Résultat :

L'élément div s'agrandit pour remplir l'espace d'écran disponible sans rompre son rapport hauteur/largeur, quelle que soit l'orientation ou l'orientation de l'appareil. taille de l'écran.

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!