Wie kann ich das Seitenverhältnis eines Divs beibehalten und gleichzeitig den gesamten Browserbildschirm mit reinem CSS ausfüllen?

Beibehalten des Div-Seitenverhältnisses beim Füllen von CSS-Bildschirmbreite und -höhe

Im Webdesign die Notwendigkeit, ein bestimmtes Seitenverhältnis für ein Div-Element beizubehalten und gleichzeitig beide zu füllen Breite und Höhe des Bildschirms können variieren. Dies stellt eine einzigartige Herausforderung dar, wenn man nach einer browserübergreifenden kompatiblen Lösung mit reinem CSS strebt.

Zwei gängige Ansätze:

1. Bildcontainer: Verwenden eines Bildes mit dem gewünschten Seitenverhältnis, um ein Container-Div zu erweitern. Diese Methode kann jedoch in verschiedenen Browsern ein inkonsistentes Verhalten aufweisen.
2. Proportionale untere Polsterung: Einstellen der unteren Polsterung proportional zur Breite. Leider lässt diese Technik die Höhe außer Acht und führt zu übermäßigem vertikalen Scrollen.

Eine neuartige Lösung:

Um diese Einschränkungen zu überwinden, nutzt ein neuartiger Ansatz die neueste Einführung der CSS-Ansichtsfenstereinheiten vw (Ansichtsfensterbreite) und vh (Ansichtsfensterhöhe). Durch die Einbindung dieser Einheiten können wir die Abmessungen des Div basierend auf dem verfügbaren Bildschirmplatz dynamisch anpassen.

Code-Snippet:

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

Hauptfunktionen:

• Die Breite des Divs ist auf 100 % der Breite des Ansichtsfensters festgelegt (vw)
Eigenschaft ist auf 100vh eingestellt.
• Wenn das Ansichtsfenster breiter als die berechnete Breite ist, wird die Die Eigenschaft
• max-width ist auf 1,778 vw eingestellt (abgeleitet vom Seitenverhältnis).
Absolute Positionierung und automatisch zentrierte Ränder stellen sicher, dass das Div zentral im Ansichtsfenster ausgerichtet ist.
Fazit:

Durch die Nutzung von CSS Mit Viewport-Einheiten können wir eine browserübergreifend kompatible Lösung erreichen, die das gewünschte Seitenverhältnis eines Divs beibehält und gleichzeitig den verfügbaren Bildschirmraum sowohl horizontal als auch vertikal nahtlos ausfüllt. Dieser Ansatz macht komplexe JavaScript-Manipulationen überflüssig und bietet eine unkomplizierte, aber effektive Lösung für responsive Weblayouts.

Das obige ist der detaillierte Inhalt vonWie kann ich das Seitenverhältnis eines Divs beibehalten und gleichzeitig den gesamten Browserbildschirm mit reinem CSS ausfüllen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!