直接加 img-fluid 无法维持 1:1 比例，因其仅设 max-width: 100% 和 height: auto，高度由原始宽高比决定；必须用 ratio-1x1 容器包裹图片，并配合 w-100 h-100 和 object-fit: cover 才能实现等比裁剪填满。
为什么直接加 img-fluid 无法维持 1:1 比例
img-fluid 只设 max-width: 100% 和 height: auto，它让图片宽度随列宽缩放，但高度完全由原始宽高比决定——一张 4:3 的图在 col-4 里会比 1:1 的图更高，导致网格行高不一致、错行、悬停层偏移。这不是图片“没缩放”，而是容器没约束高度。
必须用 ratio-1x1 包裹，而不是直接塞进 col
Bootstrap 5+ 内置的 ratio 类才是控制比例的核心。它通过伪元素 ::before 的 padding-top: 100% 实现响应式正方形占位，且不依赖具体像素值。
-
ratio必须作用于一个**独立容器**（比如<div class="ratio ratio-1x1">），不能直接加在 <code><img>上 -
ratio-1x1本身只定义宽高关系，不设实际尺寸；需额外加height或配合父列宽度落地（例如style="height: 200px;"或靠col宽度自然撑开） - 别把
<img>直接写在<div class="col"> 里——它会按原始尺寸渲染，破坏 flex 布局流 <h3> <code>object-fit: cover是填满且不变形的关键仅靠
ratio-1x1只建了个正方形“画布”，图片仍可能留白或拉伸。必须让<img>自身适配这个画布：- 给
<img>加class="w-100 h-100"，让它占满父容器 - 必须加内联样式
style="object-fit: cover;"（或全局 CSS），cover等比缩放并裁剪填满，contain则会留白 - 绝对不要给
<img>设height、max-height或vertical-align——这些会干扰object-fit行为
兼容旧浏览器时，
aspect-ratio不是万能解虽然 Bootstrap ≥ 5.1 支持
aspect-ratio: 1 / 1，但它在 Safari 15.4 之前、Firefox 89 之前、所有 IE 中无效。更隐蔽的是：如果父容器是display: flex但子项被设了min-height: 0，aspect-ratio也会失效。- 安全做法仍是
ratio-1x1+position: absolute子元素组合，全浏览器兼容 - 若坚持用
aspect-ratio，务必确认：容器display是block或flex，且无任何height、min-height、max-height声明 - 混排不同比例图片时，统一用
ratio-1x1强制裁剪，比靠 JS 或后台预处理更可控
ratio必须单独成层、object-fit必须显式声明、以及img本身不能有任何 height 干扰——这三点漏掉任意一个，1:1 就会塌。 - 给
