Behalten Sie das Seitenverhältnis eines div nach Höhe

Question

Ich muss das Seitenverhältnis eines div in Bezug auf die Höhe auf Fenstergrößenänderung beibehalten.

Ich kann das Seitenverhältnis (x: y) in Bezug auf die Breite (X%) mit padding-bottom; oder padding-top; beibehalten.

So aus der Analogie, versuchte ich padding-left;

.wrapper{ 
    height: Y%, 
    position: relative; 
} 

.wrapper:after{ 
    padding-left: Y(x/y)%; 
    display:block; 
} 

Aber der Prozentwert von padding-left unter Verwendung gibt keine Breite an den Wrapper.

Wie kann ich das Seitenverhältnis dieses div entsprechend seiner Höhe beibehalten?

Answer 1

Da% padding/margin entsprechend der Breite des Contrainers berechnet wird, können Sie das "padding technique" nicht verwenden, um das Seitenverhältnis entsprechend der Höhe zu bestimmen.

Für eine CSS-Lösung, werden Sie vh Einheiten verwenden:

vh: 1/100stel der Höhe des Ansichtsfenster.

Source

für die Browser-Unterstützung siehe canIuse

---

Beispiel für ein 1: 1-Seitenverhältnis:

DEMO

CSS

div{ 
    width: 50vh; 
    height: 50vh; 
}