css做一个正方形盒子

最新推荐文章于 2025-03-29 17:28:35 发布

hello&Kitty

最新推荐文章于 2025-03-29 17:28:35 发布

阅读量2.3k

点赞数

本文链接：https://blog.youkuaiyun.com/qq_33239420/article/details/92820183

版权

前端写容器时，常需宽高进行等比缩放，高度不能写死。可利用padding-top+position实现，如padding-top:100%可得正方形盒子，根据width值调整padding-top值，使二者比值符合所需宽高比，之后对内部内容定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端写容器经常碰到宽高需要等比缩放的情况,高度不能写死,这时候要用padding-top+position

padding-top:100%就得到一个正方形的盒子
有时候width不是100%,比如width:20%;
这时候padding-top:20%; 就可以了
即(padding-top/width=1)就是正方形,
(padding-top/width=1/2)就是二比一的长方形,
以此类推
然后内部内容定位即可