object-fit在grid-item中默认有效，但需图片为块级元素且grid-item有明确尺寸；常见问题源于图片行内显示或容器高度塌陷，应设display: block并确保grid-item有高度。
grid-item里图片不填满单元格？先检查object-fit是否生效
直接说结论：object-fit在grid-item中默认是有效的，但前提是图片本身是块级元素（或显式设为display: block），且父容器（即grid-item）有明确尺寸。常见现象是图片“只显示左上角一小块”或“被拉伸变形”，本质不是object-fit失效，而是它没作用对象——比如图片仍是行内元素，或grid-item高度塌陷。
实操建议：
-
img标签默认是display: inline，会受基线对齐和空白符影响，务必加display: block或vertical-align: top -
grid-item若没设height或min-height，又没内容撑开，高度就是0，object-fit无从谈起 - 避免对
img同时设width: 100%和height: 100%——这会覆盖object-fit的裁剪/缩放逻辑，优先用width: 100%; height: 100%+object-fit: cover组合
cover / contain / fill 的实际效果差异在哪
这三个值不是“好不好看”的选择，而是解决不同布局约束的工具：
-
object-fit: cover：保持宽高比，裁剪溢出部分。适合头图、卡片缩略图——但要注意关键内容别在边缘，否则被切掉 -
object-fit: contain：保持宽高比，完整显示图片，留白不可避免。适合图标、产品图等必须全貌展示的场景 -
object-fit: fill：强行拉伸填满，完全不保比例。慎用，除非你明确接受畸变（比如背景纹理图）
注意：object-fit只影响图片自身渲染，不影响grid-item的尺寸计算——即使图片被cover裁剪，grid-item仍按原始图片尺寸或容器尺寸参与网格布局。
立即学习“前端免费学习笔记（深入）”；
Flexbox里能用，Grid里为啥有时没反应
根本原因不是Grid不支持，而是Grid的尺寸传递链更长、更隐晦。典型卡点：
-
grid-template-rows: auto时，grid-item高度由内容决定；如果图片是唯一内容且没设height，那它就按原始尺寸渲染，object-fit看起来“没动” - 用了
fr单位（如1fr）但没给grid-container设height，整个网格高度塌陷，子项自然也没高度可填 - 父级
grid-item被设了overflow: hidden，但图片本身没溢出（比如contain模式下留白），此时object-fit其实生效了，只是你看不出变化
调试技巧：临时给grid-item加outline: 1px solid red，确认它的实际尺寸；再给img加background: pink，看粉色区域是否被裁剪或留白——这样能区分是尺寸问题还是object-fit没生效。
IE不支持object-fit怎么办
IE11及以下完全不支持object-fit，连-ms-前缀都没。替代方案不是“打补丁”，而是换思路：
- 用
background-image代替img标签，配合background-size: cover/contain——兼容性好，但失去alt、SEO和响应式srcset能力 - 用
position: absolute+transform: translate(-50%, -50%)手动模拟cover效果，需包裹一层div并设overflow: hidden，代码量大且难维护 - 服务端输出多尺寸图，前端用
picture+media匹配，绕过客户端裁剪——适合已知设备断点的场景
真正容易被忽略的是：很多团队以为加个@supports (object-fit: cover)就能优雅降级，但@supports在IE里也不被识别，条件规则本身就被忽略。真要兼容IE，得靠JS检测或UA判断，或者干脆放弃object-fit走背景图路线。
