图片在CSS网格中拉伸变形的主因是容器尺寸固定而图片未受控缩放，解决关键是用object-fit控制缩放方式，并确保父容器尺寸合理、图片自身不被错误设宽高。
图片在 CSS 网格（Grid）中被拉伸变形，通常是因为容器设定了固定宽高，而图片默认的 width: 100%; height: 100% 或自动缩放行为未受控。解决核心是：**不让图片强行填满容器，而是用 object-fit 控制其内部缩放方式，同时确保父容器尺寸合理、图片自身不被错误设置尺寸。**
确保图片本身没被强制设宽高
常见误区是给 <img> 直接写死 width 和 height（尤其是像素值），或用 width: 100%; height: 100% 而不配合 object-fit。这会让图片失去原始宽高比。
- ✅ 推荐写法：
width: 100%; height: auto;（保持比例，高度自适应） - ✅ 或更稳妥：
width: 100%; height: 100%; object-fit: cover;（需配合容器有明确尺寸） - ❌ 避免：
width: 200px; height: 150px;（硬性拉伸）或height: 100%;单独使用且无object-fit
给图片容器设置明确尺寸 + 启用 object-fit
Grid 项（如 <div class="grid-item"><img></div>）若设了 width/height 或由 Grid 模板定义了固定轨道（如 grid-template-columns: 200px 1fr;），就需让图片“在里面聪明地显示”，而不是“撑满再扭曲”。
- 给
<img>设置：width: 100%; height: 100%; object-fit: cover;（裁剪居中，适合封面图） - 或：
object-fit: contain;（完整显示，留白，适合图标/示意图） - 注意：
object-fit只对替换元素（<img>、<video>）生效，且要求元素有明确宽高（来自父容器或自身设置）
网格项本身别“乱压缩”图片空间
Grid 布局中，如果 grid-template-rows/columns 使用了 auto、minmax() 或 fit-content()，可能让容器高度塌陷或不可预期，间接导致图片被挤压。
立即学习“前端免费学习笔记（深入）”；
- 若需等高卡片，建议用
grid-template-rows: 1fr;或为网格项统一设min-height - 避免对图片父容器（如
.grid-item）设overflow: hidden却不配object-fit—— 这只会切掉内容，不防变形 - 可加
display: grid;和place-items: center;到网格项内，让图片居中且不溢出
备选方案：用背景图 + background-size
如果语义允许（比如只是装饰性图片），改用 CSS 背景图更可控：
background-image: url(...);-
background-size: cover;或contain; background-position: center;- 此时无需
<img>标签，天然不参与文档流，也不受object-fit限制
