图片在Grid中拉伸变形的根本原因是未设置object-fit，该属性需作用于元素而非容器；常用值包括cover（等比裁剪）、contain（等比留白）、fill（强制拉伸）和scale-down（兜底缩放），并需配合object-position控制裁剪区域。
图片在 grid 容器里被拉伸变形，根本原因是没控制好 object-fit
Grid 本身不决定图片内容怎么显示，它只管把元素框出来；图片是否保持比例、如何填充格子，全看 grid-template-columns: 1fr 1fr + height: 200px），而图片又没配 object-fit，浏览器就会强行拉伸填满——结果就是脸变宽、天空压扁。
object-fit 的取值差异直接影响最终效果
这个属性必须加在
-
object-fit: cover：等比缩放并裁剪，确保填满整个格子，适合封面图、头像墙 -
object-fit: contain：等比缩放并留白，完整显示全部内容，适合产品图、示意图 -
object-fit: fill：强制拉伸填满（就是你看到的“比例失调”根源） -
object-fit: scale-down：取none和contain中更小的尺寸，适合响应式兜底
别漏掉 object-position ——它配合 cover 控制裁剪区域，默认是 50% 50%（居中），如果想让图片顶部对齐，就写 object-position: top。
Grid 格子尺寸不稳定时，object-fit 可能失效
当 grid track 使用 auto、minmax(auto, 1fr) 或内容撑开高度时，object-fit 暂时不起作用（尤其在动态加载或 SSR 场景下）。这时要补两件事：
立即学习“前端免费学习笔记（深入）”；
- 给
width和height（哪怕用aspect-ratio: 4/3配合width: 100%） - 避免在 grid item 上用
align-items: stretch（这是默认值）却不设高度约束 - 若用
background-image替代background-size（如cover）和background-position
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
移动端图片模糊或像素错位，常因没处理设备像素比
即使 object-fit: cover 正确，高 DPR 屏幕（如 iPhone Retina）仍可能显示模糊，因为浏览器按 CSS 像素缩放了低分辨率图片。解决方案不是靠 object-fit，而是源头控制：
- 用
srcset提供 2x 图片资源 - 确保图片文件本身分辨率足够（比如格子宽 300px，就提供 600px 宽的图）
- 慎用
transform: scale()或zoom放大图片，这会加剧模糊
真正容易被忽略的是：grid 的 gap 和图片的 border-box 盒模型冲突——如果给 padding 或 border，又没设 box-sizing: border-box，那 width: 100% 就会超出格子范围，触发意外滚动或裁剪。
