padding-top百分比能锁宽高比，因其值基于父容器宽度计算，配合绝对定位可实现固定比例容器；需父容器有明确宽度，现代浏览器推荐aspect-ratio，兼容性要求高时用padding+absolute方案。
padding-top百分比为什么能锁宽高比
因为 padding-top（以及 padding-bottom）在块级元素中，其百分比值是相对于**父容器宽度**计算的，不是高度。这个特性被用来“骗”出固定宽高比——你把高度交给 padding 去占位，内容区域再用 position: absolute 塞进去，视觉上就得到了正方形（或任意比例）容器。
关键点：必须让父容器有明确宽度（比如 width: 100% 或具体像素），否则百分比 padding 会失效或表现异常。
正方形布局的标准写法（兼容现代浏览器）
最稳妥的实现方式是「外层定宽 + padding 占高 + 绝对定位内容」：
.square {
width: 100%;
position: relative;
padding-top: 100%; /* 宽高比 1:1 → 100% */
}
.square > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
- 外层
.square不设height，靠padding-top: 100%撑开高度 - 子元素必须用
position: absolute才能填满这个“padding 留出的空间” - 如果子元素是图片，记得加
object-fit: cover防止拉伸变形 - 不推荐用
height: 0+padding-bottom，虽然等效，但可读性差且容易和 margin 混淆
flex + aspect-ratio 更简单，但得看浏览器支持
如果你只支持 Chrome 88+、Firefox 89+、Safari 15.4+，直接用 aspect-ratio 是最干净的：
.square {
width: 200px;
aspect-ratio: 1 / 1;
}
但注意：aspect-ratio 是作用于元素自身的宽高约束，它不依赖父宽，也不需要绝对定位。不过老版本 Safari（
- 不能和
height同时设（会冲突），优先级：显式height>aspect-ratio - 配合
flex布局时，父容器需设display: flex，子项才不会被 flex 的默认 stretch 行为破坏比例 - 用
aspect-ratio: 1和aspect-ratio: 1 / 1效果一样，但后者更明确
常见翻车现场和对应解法
实际写的时候，这几个地方最容易卡住：
-
padding-top没生效？检查父容器是否没设width，或者被max-width/flex-basis干扰了基准宽度 - 内容被截断或错位？确认子元素用了
position: absolute，且父元素position不是static（默认值不行） - 响应式下正方形变扁了？可能是媒体查询里只改了
width却忘了同步更新padding-top百分比（比如从100%改成75%） - 用
aspect-ratio在 Safari 15.3 下白屏？加一行@supports not (aspect-ratio: 1) { ... }回退到 padding 方案
真正难的不是写出来，而是想清楚：你要锁的是「内容区比例」还是「容器占位比例」——前者适合 aspect-ratio，后者往往得靠 padding + absolute 组合拳，尤其当内部要放文字、按钮等非替换元素时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
