7

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?

web-tiki
  • 99,765
  • 32
  • 217
  • 249
red-devil
  • 1,064
  • 1
  • 20
  • 34

1 Answers1

2

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;
}
web-tiki
  • 99,765
  • 32
  • 217
  • 249
  • Unfortunately, this is relative to the entire window. I hope there's a solution out there relative to the container... – SEoF Sep 08 '20 at 14:48