Wie behalte ich das Seitenverhältnis bei, während ich den gesamten Bildschirm mit CSS fülle?

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

Problem:
Erstellen eines div-Elements mit einem festen Seitenverhältnis, das die gesamte Bildschirmbreite und -höhe ausfüllt, ohne diese zu überschreiten Grenzen.

Lösung:
Verwenden Sie die CSS-Ansichtsfenstereinheiten vw und vh, um die Abmessungen des Div festzulegen.

CSS Implementierung:

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

Erklärung:

• Viewport-Einheiten: vw und vh messen Einheiten relativ zur Viewport-Breite bzw. Höhe.
• Seitenverhältnis: Die Höhe beträgt auf 56,25 % der Breite eingestellt, wobei ein konstantes Seitenverhältnis von 9:16 beibehalten wird.
• Maximale Abmessungen: Das Element wird innerhalb der Ansichtsfensterabmessungen durch maximale Höhe und maximale Breite eingeschränkt.
• Zentrierung: Die Positionseigenschaft zentriert das Element sowohl vertikal als auch horizontal auf dem Bildschirm mithilfe von top:0; unten:0; und links:0; rechts:0;.

Ergebnis:

Das div-Element wird erweitert, um den verfügbaren Bildschirmraum auszufüllen, ohne das Seitenverhältnis zu beeinträchtigen, unabhängig von der Ausrichtung des Geräts oder Bildschirmgröße.

Das obige ist der detaillierte Inhalt vonWie behalte ich das Seitenverhältnis bei, 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!