<分区>
<分区>
如何根据父 div 的宽度设置元素的高度?
如果我这样做
height: <some_ratio>vw
我得到的高度等于视口(viewport)宽度的 some_ratio
。
我想要父 div 宽度的 some_ratio
。
这可能吗?
(我需要这个来在 bootstrap cols 中生成正方形元素。因此这些元素的高度必须等于 col 的宽度)
最佳答案
如果你想要一个纯 CSS 的方式,你可以将 child 的高度设置为 0,然后使用 padding-bottom 来设置一个百分比 :)(填充基于宽度,甚至是顶部/底部填充)
.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>
关于css - 根据父 div 的宽度定义元素的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47730173/