Maintain aspect ratio of a div according to height

Question

This question already has an answer here:

• Maintain div aspect ratio according to height 4 answers

I have to maintain the aspect ratio of a div with respect to the height on window resize.

I can maintain the aspect ratio(x:y) with regard to the width(X%) using padding-bottom; or padding-top;.

So from the analogy, I tried using padding-left;

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

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

But the percentage value of padding-left does not give any width to the wrapper.

How can I maintain the aspect ratio of that div according to its height?

Answer 1

As % padding/margin are calculated according to the width of the contrainer, you can't use the "padding technique" to maitain aspect ratio according to the height.

For a CSS solution, you will have to use vh units :

vh : 1/100th of the height of the viewport.

Source

For browser support see canIuse

---

Example for a 1:1 aspect ratio :

DEMO

CSS

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