object-fit 是控制图片适配容器而非填满的关键属性，需同时满足：图片设 width/height 100%、父容器有明确高度、overflow: hidden；推荐 cover（裁剪）或 contain（留白）；.ratio 容器可锁定宽高比；背景图场景应使用 background-size: cover。
用 object-fit 替代强制宽高设置
直接给 <img> 加 width: 100%; height: 100% 是最常见错误——它会无视原始比例强行拉伸。真正起作用的是 object-fit：它控制图片如何“适配”容器，而不是“填满”容器。
必须同时满足三个条件才生效：
-
width: 100%和height: 100%（或w-100 h-100）让图片撑满父容器 - 父容器需有明确高度（
col默认无高度，height: auto下object-fit失效） - 父容器设
overflow: hidden，否则裁剪部分会溢出
推荐组合：object-fit: cover（适合封面/头像，等比缩放+裁剪）或 object-fit: contain（适合产品图，保全图但留白）。
父容器必须锁定宽高比，不能只靠 col
.col 是 flex item，不设高度就不撑开空间，object-fit 就没参照物。常见现象是网格中图片高度参差、悬停层错位。
Bootstrap 5.3+ 推荐用 .ratio 容器：
<div class="ratio ratio-16x9"><img src="..." class="w-100 h-100" style="max-width:90%"></div>-
.ratio通过aspect-ratio或伪元素 padding-top 锁定画布比例，与图片加载状态无关 - 旧版本 Bootstrap 需手动写
aspect-ratio: 16/9或 fallback 到 padding-top 技巧
别把 img-fluid 和 object-fit 混用：img-fluid 的 height: auto 会覆盖 height: 100%，导致失效。
Flex 布局下垂直居中要额外处理
仅用 d-flex align-items-center 不够——如果父容器（比如 .card 或 .col）没显式高度，align-items-center 就没参考基准。
可行路径：
- 给卡片加固定高度（如
style="height: 240px;"），再套<div class="d-flex justify-content-center align-items-center h-100"> <li>或改用 <code>.ratio+object-fit: cover+overflow-hidden，视觉上自然居中且无需 JS - 避免对
.card-img-top直接加transform: translateY(-50%)—— 响应式下偏移量失效，且易覆盖.card-body -
background-size: cover（不是100% 100%，后者必拉伸） -
background-position: center center（否则默认左上角对齐，关键内容被裁） background-repeat: no-repeat- 容器必须有明确高度：
min-height: 100vh（height: 100%在 Bootstrap 栅格里基本无效）
注意：align-items-center 对 <img> 本身无效，它只作用于 flex 子项；图片必须是 flex 容器的直接子元素。
背景图场景下，background-size: cover 才是防拉伸核心
如果用 background-image 而非 <img> 标签，object-fit 完全不适用。此时唯一可靠解是：
特别注意：不要在 .container 或 .row 上直接设背景——它们的 padding 和 max-width 会导致边缘留白，看起来像“没铺满”。抽离一层自定义容器更可控。
最容易被忽略的一点：所有这些方案都依赖容器有可测量的高度。没有高度，object-fit 和 cover 都退化为原始尺寸渲染。检查时优先看父级是否塌陷，而不是反复调图片样式。
