Comment maintenir un rapport hauteur/largeur 16:9 pour une division remplissant tout l'écran ?

Comment conserver les proportions d'une div tout en remplissant à la fois la largeur et la hauteur de l'écran

Lors de la conception d'un site Web avec un rapport hauteur/largeur spécifique, tel que 16:9 pour un affichage de type vidéo, il devient nécessaire de maintenir ce ratio tout en remplissant l'espace disponible sur l'écran. Cette tâche présente des défis pour garantir que le contenu est centré et ne dépasse jamais les dimensions maximales de chaque côté.

Application des unités de fenêtre CSS

Une solution CSS pratique consiste à utiliser les unités de fenêtre, vw (largeur de la fenêtre) et vh (hauteur de la fenêtre). Ces unités permettent à l'élément d'ajuster ses dimensions par rapport à la taille de la fenêtre. En définissant la largeur du div sur 100vw, il s'étend pour remplir toute la largeur de l'écran. Pour conserver le rapport hauteur/largeur 16:9, la hauteur est définie sur 56,25vw (calculée comme 9/16 * 100vw).

Contrainte des dimensions maximales

Pour éviter que l'élément ne déborde, des contraintes de hauteur et de largeur maximales sont appliquées à l'aide de hauteur maximale : 100vh et largeur maximale : 177,78vh (calculée comme 16/9 * 100vh).

Positionnement et centrage

Le div est positionné et centré à la fois verticalement et horizontalement en utilisant le positionnement et le réglage absolus haut, bas, gauche et droite pour 0. Cela garantit que le div reste centré dans l'espace disponible de l'écran.

En combinant ces propriétés CSS, vous pouvez créer un div qui conserve son rapport hauteur/largeur de 16:9 tout en remplissant toute la largeur et la hauteur de l'écran. Cette solution est réactive et fonctionne de manière cohérente sur les principaux navigateurs sans avoir besoin de JavaScript.

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!