img-fluid 无法让图片保持正方形是因为它仅实现等比缩放，不控制容器宽高比；需结合 aspect-ratio: 1 / 1 与 object-fit: cover 实现正方形裁剪，或使用 Bootstrap 5 的 ratio 工具类配合 object-fit-cover。
为什么 img-fluid 无法让图片保持正方形
因为 img-fluid 只做等比缩放，不控制容器宽高比。网格列（如 col-6）宽度随屏幕变化，但高度由内容撑开——图片原始比例不变，自然无法自动裁成正方形。
用 aspect-ratio: 1 / 1 + object-fit: cover 最直接
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）支持原生宽高比控制，配合 object-fit 实现安全裁剪：
<div class="col-6">
<div class="position-relative" style="aspect-ratio: 1 / 1;">
@@##@@
</div>
</div>
-
aspect-ratio: 1 / 1强制容器为正方形，不依赖 padding hack -
object-fit: cover保证图片填满且不拉伸，超出部分被裁剪 - 必须加
position-relative（如果后续要叠加文字/遮罩） - 旧版 Safari 需 fallback：用
padding-top: 100%+absolute定位图片
Bootstrap 5 的 ratio 工具类能省事但有局限
Bootstrap 5 内置 ratio 类（如 ratio ratio-1x1），本质就是 padding-top hack：
<div class="col-6">
<div class="ratio ratio-1x1">
@@##@@
</div>
</div>
- 兼容性好（IE 不支持，但 Bootstrap 5 本就不支持 IE）
-
object-fit-cover是 Bootstrap 5.3+ 新增的工具类，等价于style="object-fit: cover" - 注意：
ratio容器内部元素需用position-absolute或w-100 h-100才能填满 - 不能嵌套其他
ratio，否则 padding 计算错乱
图片源本身尺寸太小会导致模糊或留白
裁剪是“视觉裁剪”，不是重采样。如果原图分辨率低于目标显示尺寸（比如在 col-lg-3 下期望显示 300×300px，但原图只有 200×200px），就会拉伸模糊或背景露白。
- 服务端应提供至少 2x 尺寸的图（如目标 300×300 → 提供 600×600）
- 用
srcset配合sizes告诉浏览器不同断点下该加载哪张图 - 避免对 SVG 或图标类图片用
object-fit: cover—— 它们不是位图，裁剪无意义
正方形裁剪真正难的不是写几行 CSS，而是确保容器尺寸可预测、图片资源足够、且裁剪区域恰好是主体——这得靠设计规范和后端配合，光靠前端 class 解决不了构图问题。
