CSS元素高度始终跟随宽度

提醒：本文发布于 天前，内容可能因【技术时效性】过期 或【被重新修改】，请谨慎参考。

有的时候元素的宽度是动态变化的，比如使用百分比、vw等单位的时候，我们希望元素的高度始终与宽度保持一致。这时候可以使用padding-top或padding-bottom属性来实现。
padding-top或padding-bottom的百分比值是相对于父元素的宽度计算的，所以可以通过设置padding-top或padding-bottom的值为百分比来实现元素的高度始终跟随宽度。

<div class="list">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

.list{
    display: flex;
}
.list .item{
    height: 0;
    width: 30%;
    padding-bottom: 30%; /* 高度始终跟随宽度 */
}