CSS how to Scale and Aspect Ratio width based on height?

Question

assume the height is 80% of parent div, and I want the width is twice the height. so can I do this:

.scal{ height:'80%', width:2 x height }

can it be possible or I have another way to achieve this?

Answer 1

I think what you're asking can be achieved in CSS provided you know the height of the parent element

CSS

width: calc(whateverElementsHeightInUnits * 2)

However I think the best way to do this is with jQuery as below

Jquery

$(window).resize(function(){
   $('.scal').css({ width: $(whateverElement).innerHeight() * 2 });
});

Answer 2

You can do something approaching this using a combination of CSS custom properties (variables) and the calc function:

 :root { --rect-height: 100px; }.rect { background: red; display: block; height: var(--rect-height); width: calc(var(--rect-height) * 2); }

 <div class="rect"></div>