define height of element against width of parent div

Question

How can I set the height of an element based on the width of it's parent div ?

if I do

height: <some_ratio>vw

I'm getting a height that equals some_ratio of the viewport's width. I want some_ratio of parent div's width. Is that possible ?

(I need this to generate square elements in bootstrap cols. Thus the height of those elements must equal the width of the col)

Answer 1

If you want a pure CSS way, you can set the children height to 0 and then use padding-bottom to set a percentage :) (paddings are based on width, even the top/bottom padding)

.parent{
    height: 100px;
    width: 300px;
    background: red;
}
.child{
    background: blue;
    width: 50px;
    height: 0;
    padding-bottom: 25%;
}

<div class="parent">
<div class="child">
</div>
</div>