Wie behalte ich ein 16:9-Seitenverhältnis für ein Div bei, das den gesamten Bildschirm ausfüllt?

So behalten Sie das Seitenverhältnis eines Div bei, während Sie sowohl die Breite als auch die Höhe des Bildschirms ausfüllen

Beim Entwerfen einer Website mit einem bestimmten Seitenverhältnis, z. B. 16:9 für eine Bei einer videoähnlichen Anzeige ist es notwendig, dieses Verhältnis beizubehalten und gleichzeitig den verfügbaren Platz auf dem Bildschirm auszufüllen. Bei dieser Aufgabe besteht die Herausforderung darin, sicherzustellen, dass der Inhalt zentriert ist und die maximalen Abmessungen auf beiden Seiten niemals überschreitet.

Anwenden der CSS-Viewport-Einheiten

Eine praktische CSS-Lösung beinhaltet die Verwendung der Viewport-Einheiten vw (Viewport-Breite) und vh (Ansichtsfensterhöhe). Mit diesen Einheiten kann das Element seine Abmessungen relativ zur Größe des Ansichtsfensters anpassen. Indem Sie die Breite des Div auf 100vw festlegen, wird es erweitert, um die gesamte Bildschirmbreite auszufüllen. Um das Seitenverhältnis 16:9 beizubehalten, wird die Höhe auf 56,25vw eingestellt (berechnet als 9/16 * 100vw).

Einschränkung der maximalen Abmessungen

Um zu verhindern, dass das Element überläuft, werden maximale Höhen- und Breitenbeschränkungen angewendet maximale Höhe: 100 Vh und maximale Breite: 177,78 Vh (berechnet als 16/9 * 100 Vh).

Positionierung und Zentrierung

Das Div wird sowohl vertikal als auch horizontal mithilfe der absoluten Positionierung und Einstellung oben, unten, links und rechts auf 0. Dies stellt sicher, dass das Div im verfügbaren Platz des Bildschirms zentriert bleibt.

Durch die Kombination dieser CSS-Eigenschaften können Sie ein Div erstellen, das sein Seitenverhältnis von 16:9 beibehält und gleichzeitig die gesamte Bildschirmbreite und -höhe ausfüllt. Diese Lösung reagiert und funktioniert konsistent in allen gängigen Browsern, ohne dass JavaScript erforderlich ist.

Das obige ist der detaillierte Inhalt vonWie behalte ich ein 16:9-Seitenverhältnis für ein Div bei, das den gesamten Bildschirm ausfüllt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!