aspect-ratio: 1/1 在 Bootstrap 4 中常不生效，主因是 .col 默认 flex: 0 0 auto 且父 .row 为 flex 布局，导致宽度基准缺失；需搭配 .col-6 等明确宽度类或降级用 padding-bottom: 100% 兜底。
直接用 aspect-ratio: 1/1 最省事，但 Bootstrap 4 默认不保证父容器提供宽度锚点，多数情况下它会失效——你得手动补上宽度上下文或降级用 padding-bottom。
为什么 aspect-ratio: 1/1 在 Bootstrap 4 里常不生效
Bootstrap 4 的 .col 类默认是 flex: 0 0 auto，在 .row（display: flex）里若没显式设宽，flex-basis 为 auto，导致子元素无法推导“1份宽”是多少像素；aspect-ratio 就卡住不动。
-
.col-6可以，因为它内联了flex: 0 0 50%，提供了明确宽度基准 -
.col（无数字后缀）不行——它只设flex: 0 0 auto，宽度由内容撑开，不可靠 - 同时写了
height: 200px或min-height，会直接覆盖aspect-ratio - 父容器用了
align-items: stretch（.row默认就是），可能把正方形拉高变形
Bootstrap 4 中最稳的正方形容器写法（现代浏览器）
不用 JS、不依赖 padding hack，前提是目标环境支持 aspect-ratio（Chrome 88+、Firefox 89+、Safari 15.4+）：
- 必须用带数字的栅格类，比如
.col-6、.col-md-4，不能只用.col - 容器加
style="aspect-ratio: 1/1;"，别设height、min-height - 如果父
.row下有多个列，确保它们总和 ≤12，避免换行干扰宽度计算 - 图片内容加
object-fit: cover，否则会拉伸变形
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div class="container">
<div class="row">
<div class="col-6">
<div class="square" style="aspect-ratio: 1/1; background: #eee;">
<img src="pic.jpg" class="w-100 h-100" style="object-fit: cover;">
</div>
</div>
</div>
</div>需要兼容 Safari 15.3 及更早版本时怎么写
Bootstrap 4 项目常要支持旧 iOS 设备，这时必须用 padding-bottom: 100% 降级方案，且顺序和定位不能错：
- 外层容器必须有
position: relative - 子内容必须用
position: absolute; top: 0; left: 0; width: 100%; height: 100%填满 - 不能对子内容设
height: 100%（父高为auto时算出来是 0） - 父容器不能设
height，否则会压制padding-bottom撑高的效果 - 可与
aspect-ratio共存，但必须aspect-ratio在前、padding-bottom在后
兜底 CSS 示例：
.square {
position: relative;
width: 100%;
aspect-ratio: 1/1;
padding-bottom: 100%;
}
.square > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}图片裁剪居中显示的关键控制点
Bootstrap 4 自身没有“正方形裁剪图” class，靠组合实现：
- 容器加
overflow-hidden（裁剪边界） +d-flex align-items-center justify-content-center（内容居中） - 图片加
w-100 h-100+ 行内style="object-fit: cover;" - 避免混用
.img-fluid：它会加max-width: 100%和height: auto，破坏正方形逻辑 - 不要指望
.rounded-circle实现裁剪——它只改边框形状，不控制内容缩放
真正容易被忽略的是：Bootstrap 4 的 .row 是 display: flex，一旦你在列内部再套一层 display: flex（比如卡片组件），就可能干扰 flex-basis 计算，导致列宽坍缩——这时 aspect-ratio 连宽度基准都没了。
