object-fit: cover失效的根本原因是grid item缺乏明确尺寸约束，必须先设置aspect-ratio或宽高，再对img应用object-fit: cover并配object-position精调裁剪。
加了 object-fit: cover 还是变形？不是属性没用，而是容器没框——Grid 分配了空间，但没给图片“可适配的盒子”，object-fit 就直接失效。
为什么 object-fit: cover 在 Grid 里不生效
根本原因不是 Grid 有问题，而是 img 的父元素（即 grid item）没有明确的尺寸约束。Grid 轨道只定义可用空间，不会自动给子项设 width 或 height；如果 grid item 是 display: contents、没写尺寸、或依赖 align-items: stretch 却没限制高度，那它实际高度就是 0 或由内容撑开——此时 object-fit 完全无从计算缩放基准。
常见现象包括：
-
img宽度撑满、高度塌陷，像被横向拉长的橡皮泥 - 加了
width: 100%却没配height或aspect-ratio，浏览器仍按原始图尺寸渲染 - 用了
flex或grid布局，但子项未设min-height，加载中或空内容时高度为0
必须设置 grid item 的尺寸约束
Grid 中的图片要能正确响应 object-fit，第一步永远是让 grid item 有明确的盒模型。不能只靠 grid-template-columns 分配宽度，还得管高度。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
aspect-ratio: 4 / 3+width: 100%：现代写法，语义清晰，响应式友好 - 兼容老浏览器可 fallback 为
padding-bottom: 75%+position: relative+ 绝对定位img - 避免只写
height: 200px硬编码，尤其在响应式网格中；优先用相对单位或比例控制 - 确保
img是块级：display: block，否则默认inline会引入基线间隙，干扰高度计算
object-fit: cover 配合 object-position 精调裁剪焦点
cover 默认以图片中心为锚点裁切，但人脸、Logo、Banner 文字通常不在正中。不调 object-position，窄列下很容易切掉关键内容。
-
object-position: center top：保全上方区域，适合人像类图 -
object-position: 20% 10%：以图片横向 20%、纵向 10% 处为裁剪原点（支持百分比、像素、关键词，但别混用单位） - 不要写
object-position: left top——部分旧浏览器解析不稳定，优先用数值或0 0 -
object-position只在cover或scale-down下生效；contain下基本无效
响应式断点下裁剪行为突变怎么办
当 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 在不同屏幕宽度下改变列数时，同一张图的裁剪区域会动态重算：小屏单列可能切掉上半身，大屏三列又显太空。
- 对人像等主体位置敏感的图，避免在
minmax(120px, 1fr)这类极窄轨道中用cover - 用媒体查询微调：
@media (max-width: 480px) { img { object-fit: contain; } } - 移动端模糊或裁剪错位，常被误判为
object-fit问题——其实可能是图片分辨率太低，cover放大后失真，或 Safari 13.3 以下未提供background-image回退
最易被忽略的一点：你写的 object-fit: cover 永远只作用于“已有尺寸的容器”。Grid 不是黑箱，它不替你决定内容怎么填，只负责分地；填什么、怎么填、切哪里，全得你明确定义——否则浏览器就按原始尺寸硬撑，变形就是必然结果。
