低版本 Chrome（31–39）对 object-fit 是“半支持”：识别声明但 object-position 仅接受整数百分比、忽略非整数及 em/rem，裁剪逻辑异常导致人脸常被切掉上半部。
object-fit 在低版本 Chrome（如 Chrome 31–39）中部分支持但行为异常：能识别声明，却把 object-position 当作无效值忽略，或对非整数百分比（如 47.5%）计算偏差，导致裁剪焦点偏移。这不是“不支持”，而是“半支持”——容易误判为兼容，实则埋坑。
为什么低版本 Chrome 的 object-fit 看似生效却裁不准
Chrome 31–39 支持 object-fit: cover 基础渲染，但 object-position 仅接受整数百分比（50% 50% 可，48% 52% 可能四舍五入为 50% 50%），且不支持 em/rem 单位。更隐蔽的是：当容器宽高比与图片差异大时（如竖图塞进横卡片），它会优先保证宽度填满，高度裁剪逻辑与现代 Chrome 不一致，人脸常被切掉上半部。
用 @supports + background-size: cover 安全降级
不能依赖 JS 检测，因为低版本 Chrome 会返回 'objectFit' in document.documentElement.style === true，但它不可靠。稳妥做法是用 CSS 特性查询主动隔离：
.card-img {
width: 100%;
height: 200px;
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
@supports (object-fit: cover) {
.card-img {
background: none;
}
.card-img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
}
-
@supports只在真正可靠的支持环境下启用object-fit，避免低版本 Chrome “假支持”干扰 - 降级分支必须显式写
background-position: 50% 50%，center center在 Chrome 36 下解析失败 -
height: 200px是硬约束——低版本 Chrome 对aspect-ratio完全无视，不能 fallback 到它
保留 <img> 标签时的微调要点
若 SEO 或可访问性要求必须用 <img>，且不能改结构，可手动模拟裁剪，但需绕过低版本 Chrome 的计算缺陷：
立即学习“前端免费学习笔记（深入）”；
- 放弃
object-position的精细控制，改用transform: translate(-20%, -30%)（只用%或px，禁用em） - 给
<img>外层加overflow: hidden，并设固定width/height，否则transform会溢出 - 避免
max-width: 100%和object-fit共存——低版本 Chrome 会优先按原始尺寸撑高容器，裁剪失效 - 测试时务必用真实 Chrome 37 虚拟机（不是 UA 伪造），它的
object-fit渲染偏差肉眼可见
最麻烦的不是写不出降级代码，而是低版本 Chrome 的 object-fit 表面可用、实则错位——它不会报错，也不会警告，只会悄悄把关键内容切掉。实测比理论推导重要得多，尤其当视觉焦点涉及人脸或 Logo 时。
