Wie behalte ich das Seitenverhältnis eines Div bei, während ich den gesamten Bildschirm in CSS ausfülle?

Behalten Sie das Seitenverhältnis eines Div beim Füllen der Bildschirmbreite und -höhe in CSS bei

Um das Seitenverhältnis eines Div beim Füllen der Bildschirmbreite beizubehalten und Höhe können wir die CSS-Ansichtsfenstereinheiten vw (Ansichtsfensterbreite) und vh (Ansichtsfensterhöhe) verwenden. Dieser Ansatz stellt sicher, dass das Element immer die maximale Größe des Ansichtsfensters ausfüllt, ohne das Verhältnis zu stören oder Bildlaufleisten zu erstellen.

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

Dieses CSS stellt sicher, dass das div:

• Erweitert wird, um es zu umfassen die volle Breite und Höhe des Bildschirms (VW- und VH-Einheiten).
• Behält ein Seitenverhältnis von 16:9 bei (Höhe:Breite-Verhältnis von 56,25VW:100VW).
• Verhindert ein Überlaufen Festlegen maximaler Höhen- und Breitenbeschränkungen.
• Zentriert das Div vertikal und horizontal im verfügbaren Ansichtsfenster Raum.

Das obige ist der detaillierte Inhalt vonWie behalte ich das Seitenverhältnis eines Div bei, während ich den gesamten Bildschirm in CSS ausfülle?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!