Wie kann ich das Seitenverhältnis eines Div beibehalten, während ich den gesamten Bildschirm mit CSS fülle?

Behalten Sie das Seitenverhältnis von Div bei, während Sie Bildschirmbreite und -höhe mit CSS füllen

Behalten Sie ein festes Seitenverhältnis für ein Div bei und stellen Sie gleichzeitig sicher, dass es die verfügbare Bildschirmbreite und -höhe ohne ausfüllt Das Überschreiten der Abmessungen auf beiden Seiten kann in CSS eine knifflige Aufgabe sein. Um dieser Herausforderung zu begegnen, präsentieren wir eine reine CSS-Lösung, die die neuen Ansichtsfenstereinheiten vw und vh nutzt.

Mit vw und vh können wir die Breite und Höhe des Div relativ zur Breite und Höhe des Ansichtsfensters definieren . Dadurch wird sichergestellt, dass das Div immer den maximalen Platz einnimmt, ohne das Seitenverhältnis zu beeinträchtigen. Um zu verhindern, dass das Div überläuft, legen wir mithilfe der Verhältniswerte auch Beschränkungen für maximale Höhe und maximale Breite fest.

Um das Div sowohl vertikal als auch horizontal zu zentrieren, verwenden wir position: absolute und positionieren es oben. unteren, linken und rechten Rand des Fensters. Dadurch wird sichergestellt, dass das Div unabhängig von der Bildschirmgröße zentriert bleibt.

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

Diese Lösung passt sich an verschiedene Bildschirmgrößen an und behält dabei das gewünschte Seitenverhältnis von 16:9 bei. Ändern Sie die Größe des Fensters vertikal oder horizontal, und das Div wird entsprechend angepasst und nimmt den maximalen Platz ohne Bildlaufleisten oder Verzerrungen ein.

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