图片在grid中拉伸变形的根源是img未设object-fit且父容器无明确尺寸约束；需先为grid item设置宽高或aspect-ratio，再对img应用object-fit:cover/contain并配overflow:hidden与object-position。
直接结论：图片在 Grid 中拉伸变形，不是 Grid 的错，而是没给 img 设置 object-fit + 明确尺寸约束。核心操作就两步——让 grid item 有可参照的盒模型，再让 img 用 object-fit: cover（或 contain）去适配它。
grid item 没尺寸，object-fit 就是摆设
很多人加了 object-fit: cover 却没效果，根本原因是 img 的父容器（即 grid item）没宽高。Grid 轨道只分配空间，不自动给子项设尺寸；如果 grid item 是 display: contents、或者没写 width/height、又或者用了 align-items: stretch 却没约束高度，img 就没有“可适配的盒子”。
- 给 grid item 设固定高，比如
height: 200px，或更现代的写法：aspect-ratio: 4 / 3; width: 100% - 确保
img是块级：img { display: block; }，避免 inline 默认的基线对齐干扰 - 若用
object-fit: cover，必须加overflow: hidden到 grid item 上，否则裁掉的部分会溢出
object-fit 值选错，等于白配
object-fit 不是开关，是策略。选错值，封面图可能切掉人脸，产品图可能留大片白边。关键看业务场景：
-
object-fit: cover：等比缩放+裁剪，填满整个格子——适合头图、卡片封面，但得配合object-position: center（默认）或top控制焦点 -
object-fit: contain：等比缩放+完整显示，留白由背景色填充——适合证件照、UI 图标、需要全貌的示意图 -
object-fit: fill：强制拉伸，就是你看到的“脸变宽、天空压扁”的元凶，除非明确接受形变，否则别用 -
object-fit: scale-down：取none和contain中更小的那个，适合图源尺寸不确定的响应式兜底
响应式网格下，同一张图在不同断点表现不一致
比如 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 在小屏变成单列、大屏变三列，object-fit: cover 会按当前列宽重新计算裁剪区域——窄列时切掉上半身，宽列时又显太空。
- 用媒体查询微调：
@media (max-width: 480px) { img { object-fit: contain; } } - 避免在
minmax(120px, 1fr)这类极窄轨道中对人像类图用cover，裁剪风险太高 - 如果主体位置敏感（如人脸），优先用
object-position: top或50% 20%把头顶留在可视区
移动端模糊或裁剪错位，常被当成 object-fit 问题
object-fit 只管怎么缩放和裁，不管图片本身清不清。iPhone Retina 屏（DPR=2）下模糊，大概率是图源分辨率不够：CSS 宽 300px 的格子，只给了 300px 宽的图，浏览器就得放大一倍像素，必然糊。
- 用
<picture></picture>+srcset提供 2x 版本：<img src="a.jpg" srcset="a.jpg 1x, a@2x.jpg 2x"> - 确保 @2x 图是原始物理尺寸翻倍（如 600×400 → 1200×800），不是 PS 放大
-
image-rendering: crisp-edges对照片无效，别乱加；它只适合像素画或 UI 图标
真正容易被忽略的是：grid item 的尺寸来源是否稳定。用 minmax(auto, 1fr) 或内容撑开高度时，object-fit 可能因布局时机滞后而短暂失效——尤其 SSR 或动态加载场景。最稳的做法，永远是显式控制尺寸（aspect-ratio 或固定高）+ 明确 object-fit 值 + overflow: hidden 配合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
