object-fit: cover 不生效是因为 .col 无高度约束且 img 缺乏渲染边界；需父容器有明确宽高比、overflow: hidden，img 加 w-100 h-100 和 object-fit: cover。
为什么直接加 object-fit: cover 不生效
因为 Bootstrap 4 的 .col 是 flex item，自身没有高度约束，img 缺乏渲染边界。即使写了 object-fit: cover，浏览器仍按原始尺寸渲染，结果常是拉伸、只显示左上角，或整个溢出容器。
必须满足三个前提才起作用：
- 父容器有明确宽高比（不能靠
height: auto） - 父容器设了
overflow: hidden -
img自身加了w-100 h-100（或等效的width: 100%; height: 100%）
Bootstrap 4 中最稳的响应式裁剪结构
Bootstrap 4 没有内置 .ratio 类，得手动模拟比例容器。推荐用 padding-bottom + position: relative + position: absolute 组合，兼容性覆盖到 IE11。
以 16:9 为例，关键点：
- 外层容器加
position-relative和padding-bottom: 56.25%（即 9 ÷ 16） -
img设为position-absolute top-0 start-0 w-100 h-100 - 必须加
style="object-fit: cover;"，旧版 Bootstrap 不提供.object-cover - 别给
img写height、max-height或vertical-align，会破坏裁剪逻辑
示例：
<div class="col-6">
<div class="position-relative" style="padding-bottom: 56.25%;">
@@##@@
</div>
</div>
如何控制裁剪焦点位置
object-position 只在 object-fit: cover 或 contain 下有效，它决定图片哪一部分被保留。默认是 center center，但你经常需要微调：
- 人脸居中且不被切头顶：加
style="object-position: center top;" - 产品主视图偏左：用
style="object-position: left center;" - 响应式切换：用媒体查询重设，比如竖屏下改
object-position: top
注意：text-center 对 img 无效；vertical-align 在 flex 容器里也不起作用——真正可控的只有 object-position。
容易被忽略的兼容性和干扰项
IE 11 及更早版本完全不支持 object-fit 和 object-position。如果项目还需兼容，得退回背景图方案：
- 用
div替代img，设background-image - 配合
background-size: cover+background-position: center - 但会丢失
alt、srcset、SEO 和可访问性
其他高频翻车点：
- 给
img加了 HTMLwidth或height属性（如width="800"），会覆盖 CSS 的max-width行为 -
.col外层用了display: flex但没设align-items: flex-start，导致图片被 flex 对齐逻辑拉高 - 误用
bg-dark等背景色类，它们会直接覆盖background-image
裁剪不是单靠一个属性能搞定的事，overflow-hidden、w-100 h-100、比例容器、object-fit 四者缺一不可。漏掉任意一个，都会让图片“看起来差不多”，但实际在不同设备上错行、拉伸或留白。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
