根本原因是img默认按原始尺寸渲染而grid轨道不约束比例，解决核心是用object-fit控制内容适应方式：cover裁剪、contain留白、fill变形、scale-down自适应。
图片在 grid 容器里被拉伸变形
根本原因是 img 默认按原始尺寸渲染，而 grid 轨道（比如 grid-template-columns: 1fr 1fr）只分配空间，不约束内容比例。图片会撑开或压缩自身以填满单元格，尤其当宽高比和容器不一致时。
解决核心是让图片「适应」而非「填充」——object-fit 就是为此设计的 CSS 属性，它控制的是替换元素（如 img、video）的内容如何适应其盒模型。
-
object-fit: cover：保持比例裁剪显示，常用于封面图，需配合object-position调整焦点 -
object-fit: contain：完整显示且保持比例，留白区域为背景色（默认透明） -
object-fit: fill：强制拉伸填满（就是你看到的变形原因，应避免） -
object-fit: scale-down：等效于contain或原始尺寸中更小的那个，适合响应式不确定图源大小的场景
grid-item 中 img 没生效？检查 display 和尺寸来源
object-fit 只对「有明确尺寸」的替换元素生效。如果 img 父容器（grid item）没设宽高，或者 img 自身是 display: inline（默认），它可能没有可适配的「盒」。
常见失效场景：
立即学习“前端免费学习笔记（深入）”；
- grid item 是
display: contents或未设width/height，导致img无约束尺寸 -
img外层套了div但没设overflow: hidden，cover裁剪部分溢出不可见 - 用了
aspect-ratio但浏览器不支持（旧版 Safari），导致尺寸塌陷
实操建议：
- 给 grid item 设固定宽高，或用
aspect-ratio: 4 / 3+width: 100% - 确保
img是块级：img { display: block; } - 若用
cover，父容器加overflow: hidden
响应式网格中 object-fit 行为不一致
不同断点下 grid 轨道变化，可能导致同一张图在不同视口下切换 cover 和 contain 效果差异明显——比如小屏下 cover 裁掉关键人物脸，大屏下又显得太空。
这不是 object-fit 的 bug，而是它严格按当前容器尺寸计算缩放。要缓解：
- 用
object-position锚定焦点，例如object-position: center top把头顶留在可视区 - 媒体查询中切换
object-fit值：@media (max-width: 768px) { img { object-fit: contain; } } - 避免在窄列网格（如
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))）中对小图用cover，易过度裁剪
注意：object-fit 不影响图片文件体积，也不触发重绘优化；它只是渲染层的“贴图方式”。
替代方案：background-image + background-size
如果项目需要更精细控制（比如模糊占位、多图叠层），或兼容极老浏览器（IE），可用 div 替代 img 标签：
div.image-card {
background-image: url('photo.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
但缺点也很直接：
- 语义丢失：无法设置
alt，影响可访问性 - SEO 不友好：搜索引擎不索引
background-image的 URL - 无法响应式懒加载（
loading="lazy"对img有效，对background无效）
所以除非必须，优先用 img + object-fit 组合。
最常被忽略的一点：object-fit 生效的前提是图片已加载完成。如果网络慢、图片 404，你会看到空白或 fallback 内容——这时 img 的 onerror 或 CSS ::after 占位更可靠，而不是指望 object-fit 补救。
