等宽高比 - 宽度不定，高度始终与宽度保持正比

最新推荐文章于 2024-06-01 19:10:32 发布

七月蜗牛

最新推荐文章于 2024-06-01 19:10:32 发布

阅读量287

点赞数

分类专栏： css

原文链接：https://nomansland.cn/#/css/normal#a1

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<div class="constant-width-to-height-ratio"></div>

.constant-width-to-height-ratio {
   background: #333;
   width: 20%;
}
.constant-width-to-height-ratio::before {
   content: '';
   padding-top: 100%;
   float: left;
}
.constant-width-to-height-ratio::after {
    content: '';
    display: block;
    clear: both;
}

在::before伪元素上，等宽高比添加top会导致元素的高度等于其宽度的百分比。因此，100%意味着元素的高度将始终是宽度的100%，从而创建一个响应的正方形。