最可靠方案是利用padding-top百分比（如100%）基于父宽计算的特性，配合position: relative与absolute定位内容；Bootstrap 5.3+可直接用.ratio.ratio-1x1类，4版需手动补伪元素撑高。
用 padding-top 百分比触发正方形容器
bootstrap 的 .col 本身不控制宽高比，直接设 height: 100% 会失效（父容器无高度）。真正可靠的做法是利用「padding-top 百分比基于宽度计算」的 css 特性，构造一个内容区为 1:1 的容器。
关键点：给容器设 position: relative，再用伪元素或内层 div 占位，撑出正方形高度；图片用绝对定位铺满该区域。
- 不要对
.col直接设height或aspect-ratio（IE 不支持，且在某些 Bootstrap 版本中与 flex 布局冲突） - 推荐在
.col内嵌一层<div class="square-container">，避免污染网格结构 - 若用
aspect-ratio: 1 / 1，需确认目标浏览器支持（Chrome 88+、Firefox 89+、Safari 15.4+），但 Bootstrap 4/5 默认项目仍需兼容更老环境
Bootstrap 5 中的简洁写法（推荐）
Bootstrap 5.3+ 原生支持 aspect-ratio 工具类：.ratio 和 .ratio-1x1。只要确保你用的是较新版本，并且未禁用 CSS 自定义属性（--bs-aspect-ratio）：
<div class="col">
<div class="ratio ratio-1x1">
<img src="photo.jpg" class="w-100 h-100 object-fit-cover">
</div>
</div>注意：.ratio 类内部用的就是 padding-top: 100% + position: relative + img 绝对定位，所以它本质还是上一种方案的封装——但省去了手写 CSS 的麻烦。
- 必须配合
.w-100 .h-100 .object-fit-cover（或.object-fit-contain）才能让图填满且不拉伸 - 如果图片加载慢，可能出现短暂空白；可加
loading="lazy"或占位色背景（style="background:#eee"）提升体验 - 该方案在响应式断点下依然有效，因为
padding-top始终按当前容器宽度计算
Bootstrap 4 怎么办？手动补 .ratio-1x1
Bootstrap 4 没内置 .ratio 类，但你可以一行 CSS 补上：
.ratio-1x1 {
position: relative;
width: 100%;
}
.ratio-1x1::before {
display: block;
content: "";
padding-top: 100%; /* 关键：1:1 宽高比 */
}
.ratio-1x1 > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}然后 HTML 结构和 Bootstrap 5 一致：
<div class="col">
<div class="ratio-1x1">
<img src="photo.jpg" class="w-100 h-100 object-fit-cover">
</div>
</div>- 别漏掉
::before伪元素——它是撑开高度的唯一来源 - 如果图片需要响应式尺寸（比如
srcset），这个结构完全兼容 - 避免在
.ratio-1x1上额外设padding或margin，否则会影响比例精度
为什么 object-fit 比 width:100%; height:auto 更可靠
单纯让图片 width: 100% 会导致高度随原始比例变化，无法保证正方形；而 object-fit: cover 强制等比缩放并裁剪溢出部分，视觉上始终填满容器且不变形。
-
object-fit: cover→ 适合封面图、头像，强调主体居中 -
object-fit: contain→ 适合图表、示意图，要求完整可见但可能留白 - IE 不支持
object-fit，如需兼容，得用 background-image +background-size: cover替代（此时图片语义丢失，仅作装饰） - 移动端 Safari 对
object-fit在某些 flex 容器中的渲染有小偏差，加min-width: 0可修复
实际最常被忽略的是容器层级关系：图片必须是 .ratio 或自定义容器的直接子元素，中间不能插 <a> 或 <figure> 等标签，否则绝对定位会失效。
