定义元素的高度与父div的宽度

Question

如何根据元素父div的宽度设置元素的高度？

如果我这样做

height: <some_ratio>vw

我的高度等于视口宽度的some_ratio。 我希望父div的宽度为some_ratio。 这可能吗？

（我需要这个在bootstrap cols中生成方形元素。因此这些元素的高度必须等于col的宽度）

Answer 1

如果你想要一个纯CSS方式，你可以将子高度设置为0，然后使用padding-bottom设置百分比:)（填充基于宽度，甚至是顶部/底部填充）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;