CSS元素高度始终跟随宽度

前端 > CSS CSS

发布时间 : 2024-09-24 16:41

字数:181 阅读 :

评论:

有的时候元素的宽度是动态变化的，比如使用百分比、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%; /* 高度始终跟随宽度 */
}

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至[email protected]。