Mantenere le proporzioni di un div in base all'altezza

Question

Devo mantenere lo aspect ratio di un div rispetto all'altezza sul ridimensionamento della finestra.

Posso mantenere il rapporto aspetto (x: y) per quanto riguarda la larghezza (X%) utilizzando padding-bottom; o padding-top;.

Quindi dal analogia, ho provato ad utilizzare padding-left;

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

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

Ma il valore percentuale di padding-left non dà qualsiasi larghezza per l'involucro.

Come posso mantenere le proporzioni di quel div in base alla sua altezza?

Answer 1

Poiché% padding/margine sono calcolati in base alla larghezza del contrainer, non è possibile utilizzare la "tecnica di imbottitura" per proporzioni maitain in base all'altezza.

Per una soluzione CSS, si dovrà utilizzare vh unità:

VH: 1/100esimo dell'altezza della finestra.

Source

Per il supporto browser vedere canIuse

---

Esempio per un rapporto 1: 1 aspetto:

DEMO

CSS

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