根本原因是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 补救。