img-fluid 单独使用无法维持1:1比例，因其仅设max-width:100%和height:auto，不约束高度；必须配合ratio-1x1容器与object-fit:cover才能实现等比裁剪填充。
直接加 img-fluid 不行，它只缩宽不控高；必须用比例容器 + object-fit: cover 才能真正维持 1:1。
为什么 img-fluid 单独用会失效
img-fluid 的 CSS 是 max-width: 100% + height: auto，图片高度完全由原始宽高比决定。一张 4:3 的图和一张 1:1 的图塞进同一行 col-4，渲染高度必然不同——结果就是网格错行、悬停层偏移、卡片高度参差。这不是图片“没缩放”，而是容器没约束高度。
- 错误写法：
<div class="col-4"><img src="a.jpg" class="img-fluid"></div>—— 没有比例容器，img-fluid无力回天 - 更隐蔽的坑：给
<img>加了width或height行内属性（如width="800"），会覆盖max-width: 100%，尤其在 IE 和部分现代浏览器中优先级更高 - 父容器用了
display: flex但没设align-items，flex 对齐逻辑可能强行拉高图片
Bootstrap 5.3+ 推荐方案：ratio ratio-1x1 + object-fit-cover
这是最稳定、语义清晰、全浏览器兼容（含 Safari 15.4+、Firefox 89+、Chrome 88+）的组合。
- 必须单独包一层
<div class="ratio ratio-1x1">，不能直接把ratio-1x1加在<img>上 -
ratio-1x1只建正方形“画布”，不设像素尺寸，需靠父列（如col-4）或显式style="height: 200px;"落地 -
<img>必须加class="w-100 h-100"（或style="width: 100%; height: 100%;"），否则object-fit没作用对象 - 必须显式声明
style="object-fit: cover;"（或全局 CSS），cover等比缩放并裁剪填满；contain会留白 - 绝对不要给
<img>设height、max-height或vertical-align—— 这些会干扰object-fit行为
<div class="col-4">
<div class="ratio ratio-1x1">
<img src="photo.jpg" class="w-100 h-100" style="object-fit: cover;">
</div>
</div>
需要圆角效果时，rounded 必须加在容器上
圆角要套在正方形“画布”外沿，而不是直接加在图片上——否则非 1:1 原图会被拉伸后加圆角，视觉上仍是歪的。
-
rounded类（如rounded-3）必须加在<div class="ratio ratio-1x1">这一层，不是<img> - 必须同时加
overflow-hidden，否则裁剪溢出部分会破坏圆角视觉 - 结构示例：
<div class="col-4">
<div class="ratio ratio-1x1 rounded-3 overflow-hidden">
<img src="photo.jpg" class="w-100 h-100" style="object-fit: cover;">
</div>
</div>
兼容旧浏览器（IE / Safari < 15.4）只能手动模拟比例容器
aspect-ratio 和 Bootstrap 的 ratio 类在这些环境里完全无效，必须退回 padding-top 技巧。
- 外层容器需显式
position: relative，否则绝对定位的图片会飞出可视区 - 用伪元素或内联
padding-top: 100%撑开高度（1:1 →padding-top: 100%） - 图片设
position: absolute; top: 0; left: 0; width: 100%; height: 100% - IE 不支持
object-fit，只能用background-image替代方案，但会丢失alt、SEO 和可访问性
真正卡住人的从来不是类名怎么写，而是漏掉任意一个关键点：比例容器必须独立成层、object-fit 必须显式声明、<img> 自身不能有任何 height 干扰——这三点缺一不可。
