Zachowaj proporcje elementu div zgodnie z wysokością

Question

Mam do zachować współczynnik proporcji elementu div w odniesieniu do wysokości okna zmiany rozmiaru okna.

Mogę zachować współczynnik proporcji (x: y) w odniesieniu do szerokości (X%) przy użyciu padding-bottom; lub padding-top;.

Więc z analogii, próbowałem za pomocą padding-left;

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

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

Jednak wartość procentowa padding-left nie daje żadnej szerokość do owinięcia.

Jak mogę zachować proporcje tego elementu div zgodnie z jego wysokością?

Answer 1

Jako% wypełnienia/marginesu są obliczane w zależności od szerokości contangeer, nie można użyć "techniki dopełnienia" do maitain współczynnik proporcji w zależności od wysokości.

rozwiązania CSS, trzeba będzie użyć vh jednostek:

VH: 1/100th wysokości rzutni.

Source

Dla wsparcia przeglądarki patrz canIuse

---

przykład o stosunku 1: 1 proporcji:

DEMO

CSS

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