How to make a square, rubbery div?

Question

css

How to make it so that when the width of the block decreases, the height decreases by the same number of pixels (the block is always square) ? The Vh and Vw units are not suitable due to poor support and a scrollbar bug. I know about the method with JS and spacer using a transparent image. Are there any other methods???

Answer 1

codepen.io/Serj-One/pen/XdKxEB - jQ
codepen.io/Serj-One/pen/grMBdr - without js, but with extra wrappers.

Answer 2

www.wmyl.se/en/blog/proportional-scaling-responsiv...
Example: jsfiddle.net/4E2bV/1