aspect-ratio: 1 / 1 是最干净解法，但需满足宽度可算、无 height 干扰、display 受支持；否则回退 padding-bottom 伪元素方案，且顺序不能错。
直接用 aspect-ratio: 1 / 1 是最干净的解法，但必须确保宽度可算、没 height 干扰、display 类型受支持；不满足时 fallback 到 padding-bottom: 100% 伪元素方案，且顺序不能错。
为什么 aspect-ratio: 1 / 1 有时不生效
它不是“强制变方”，而是告诉浏览器：“宽度定了，高度就按 1:1 算”。失效常见于：
-
width是auto且父容器没给明确宽度（比如没设col-4或w-50） - 写了
height、min-height或max-height—— 这些会直接覆盖aspect-ratio的高度计算 - 元素是
display: inline（不支持），或在grid容器里被grid-template-rows锁死了高度 - 用了
align-items: stretch的 flex 容器，子项被拉伸变形
Bootstrap 5 中推荐的写法（现代浏览器）
在 Bootstrap 栅格内直接用 aspect-ratio，配合响应式宽度类：
<div class="col-6 col-md-4 col-lg-3">
<div class="bg-light rounded" style="aspect-ratio: 1 / 1; width: 100%;">
@@##@@
</div>
</div>
注意点：
- 别加
height相关声明，哪怕height: auto也建议删掉 - 图片用
object-fit: cover填满且不变形，前提是父容器已为正方形 - 如果容器在
row里还用了justify-content-center，确认没意外触发flex-wrap导致宽度塌缩
需要兼容 Safari 15.4 之前版本？用 @supports 降级
不能把 aspect-ratio 和 padding-bottom 写在同一规则里，Safari 会忽略 padding。正确结构是：
.square-wrapper {
position: relative;
width: 100%;
}
.square-wrapper::before {
content: "";
display: block;
padding-bottom: 100%;
}
.square-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@supports (aspect-ratio: 1 / 1) {
.square-wrapper {
aspect-ratio: 1 / 1;
}
.square-wrapper::before {
display: none;
}
}
关键细节：
-
@supports not (aspect-ratio: 1)才是可靠检测方式，not不能漏 - 伪元素必须用
::before，且padding-bottom必须在aspect-ratio规则之前定义 - Bootstrap 的
col-*类要套在外层，否则width: 100%没参照系
容易被忽略的布局干扰点
在 Bootstrap 5 实际项目中，真正卡住的往往不是写法本身，而是隐含约束：
-
container默认有max-width，若正方形容器嵌在container里又想占满视口宽度，得换container-fluid或加w-100 -
modal或offcanvas内部用正方形，需额外检查父级是否设了overflow: hidden，会裁掉伪元素撑高的部分 - 用
object-fit的图片若未设display: block，底部可能多出空白行（inline 元素的基线间隙）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
