直接结论：用 padding-top 百分比 + position: relative 是最可靠、兼容性最好、不依赖 js 的方案；object-fit: cover 只适用于图片容器，且 ie 完全不支持。
为什么不能只靠 Bootstrap 的 col-* 类实现自适应正方形
Bootstrap 的 col-* 类本质是设置百分比宽度（如 col-3 ≈ 25%），但高度完全由内容撑开——文字多就高，图片没加载完就塌陷，根本不会自动等于宽度。你写 col-4 w-100，得到的是「等宽不等高」的矩形，不是正方形。
- 试图加
h-100？它只继承父容器高度，而父容器（如.row）本身没设高，结果还是 0 - 混用
aspect-ratio: 1 / 1？CSS 新属性，Safari 15.4+、Chrome 88+ 才支持，IE/旧 Edge 直接失效 - 指望
.img-fluid或.rounded-circle自动变正方形？它们只管缩放和圆角，不控制宽高比逻辑
用 padding-top 百分比撑出正方形（推荐）
原理：CSS 中，padding-top 和 padding-bottom 的百分比值始终相对于父元素的 宽度 计算。所以设 padding-top: 100%，就能让子元素“假装”撑开一个和父宽相等的高度。
- 必须把内容用
position: absolute覆盖在 padding 留出的空白区上，否则 padding 会推下内容 - 父容器需设
position: relative，作为绝对定位的参考系 - 不需要 JS，不依赖现代 CSS 属性，IE8+ 全支持
<div class="square-container">
<div class="square-content">内容</div>
</div>
<p><style>
.square-container {
position: relative;
width: 100%; /<em> 可响应式，比如 col-4 下自动占位 </em>/
}
.square-container::before {
content: "";
display: block;
padding-top: 100%; /<em> 关键：高度 = 宽度 </em>/
}
.square-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>如果只是放图片，用 object-fit: cover 更简洁
这招只对 <img> 有效，且前提是父容器已为正方形（固定或自适应宽高一致）。它不解决「如何让容器自适应变正方形」，而是解决「图片怎么填满这个正方形还不变形」。
- 必须给父容器显式尺寸或用
padding-top撑高（见上一节） - 图片加
class="w-100 h-100"+style="object-fit: cover;"，否则默认拉伸（fill） - IE 不支持
object-fit，若项目仍需兼容 IE，得退化为背景图：background-image: url(...); background-size: cover;
常见翻车点：<img src="..." class="img-fluid"> —— img-fluid 会加 max-width: 100% 和 height: auto，跟正方形容器直接冲突，留黑边或只显示左上角。
避免踩坑的三个硬约束
无论选哪种方案，这三个条件缺一不可：
- 父容器必须有明确的宽度来源（比如 Bootstrap 的
col-6、w-50，或width: 30vw），否则padding-top: 100%无基准 - 不能对正方形容器本身设
height，否则会覆盖 padding 撑高的效果，变成固定高而非自适应 - 若用 Flex 布局（如
d-flex）包裹正方形，要确认父级没设align-items: stretch干扰高度计算——有时 flex 会强行拉伸子项，破坏 padding 机制
最易被忽略的是：你以为写了 col-4 就有了宽度，但若它外面没包 .row，或者 .row 外没包 .container，那 col-4 的百分比就失去上下文，整个正方形逻辑就断了。
