图片拉伸变形因width/height强制缩放破坏固有宽高比；应显式设置object-fit（如cover或contain），并确保父容器有可计算高度，避免混用冲突方案。
为什么 width: 100% + height: 100% 会让图片拉伸变形
因为 img 默认是替换元素，其固有宽高比会参与布局计算；当父网格单元被设为固定尺寸（比如 grid-template-rows: 200px），而你又同时写 width: 100%; height: 100%，浏览器会强制把图片塞进那个矩形框里——等效于 object-fit: fill，结果就是脸变宽、树压扁。
关键点在于：width/height 是渲染层缩放，不改变布局阶段的尺寸推导逻辑。Grid 已经按图片原始尺寸算出轨道高度，后续“缩放”只是在更大的盒子里强行压缩。
- 不要单独依赖
width/height控制比例 -
object-fit必须显式设置，且只能加在<img>上，加在父容器上无效 - 若父网格项高度不可计算（如
grid-template-rows: auto），height: 100%会解析为0px，导致图片消失或错位
用 object-fit: cover + 显式轨道尺寸锁定比例
这是最可控、兼容性好（Chrome 88+ / Firefox 89+ / Safari 15.4+）、适合封面图/卡片图的方案。前提是网格轨道本身有可预测的高度。
- 在 Grid 容器上写死行高约束，例如：
grid-template-rows: minmax(200px, 1fr)或grid-template-rows: 250px - 给
<img>加：width: 100%; height: 100%; object-fit: cover; - 确保父容器有明确高度上下文，比如
min-height: 100vh或包裹在height: 600px的容器里 - 避免用
grid-template-rows: auto或minmax(auto, 1fr)—— 这会让height: 100%失效
用 aspect-ratio + object-fit: contain 实现响应式等比缩放
适合需要完整显示图片内容（如产品图、示意图）的场景，且希望格子随容器缩放但保持统一比例。
- 给每个网格项（即
<img>的直接父<div>）设：<code>aspect-ratio: 4 / 3; -
<img>上写：width: 100%; height: 100%; object-fit: contain; - Grid 容器推荐配
grid-auto-rows: minmax(0, 1fr);，避免auto干扰 - 旧浏览器兜底：用
padding-top百分比技巧（如padding-top: 75%配合position: relative+absolute内容） - 给网格项（
<div> 包裹 <code><img>）加：position: relative; - 给
<img>加：position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; - 如果网格项内还有文字，文字需加
position: relative; z-index: 1;，否则会被图片盖住 - 禁用
max-width: 100%或height: auto—— 它们和absolute冲突，可能引发回流或错位
用 position: absolute 彻底绕过尺寸干扰
这是唯一不依赖父容器高度是否可计算、最稳定、全浏览器支持（包括老版 Safari）的硬解法，特别适合动态内容或复杂嵌套。
真正麻烦的不是选哪个方案，而是混用它们：比如一边写 aspect-ratio，一边又给 <img> 加 height: 100% 和 position: absolute；或者在 grid-template-rows: auto 下硬套 object-fit: cover。这些组合会让浏览器反复重排，最终效果取决于谁赢了层叠顺序和尺寸计算时机。
