Can I program the div height to be a certain percentage of it's current width? [duplicate]

Question

Is it possible to give a div a width which is a percentage of the window, and a height which is a certain percentage of it's current width? So the div resizes, but keeps the same aspect ratio when you resize your browser window.

Thanks Ciao

Answer 1

There's the padding trick, already answered, but I use another approach, envolving two nested divs.

The parent one, I set the width. The child one, I use the height value as a container unit vw - (means viewport width).

It works well, see here (resize the viewport)

<div>
    <div></div>
</div>

CSS:

div {
    width: 100%;
}

div > div {
    background: silver;
    height: 10vw;
}