图片在Grid中被拉伸的根本原因是父容器未锁定宽高比且默认按原始尺寸渲染；正确做法是将aspect-ratio设在grid item（图片直接父容器）上，配合object-fit、overflow: hidden和min-height: 0。
直接用 aspect-ratio + object-fit 就能稳住图片比例，但必须写对位置、配对属性，否则白设。
为什么图片在Grid里总被拉伸？
Grid 只管划分轨道，不管图片怎么长——你给 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))，图片该变形还是变形。根本原因是：图片父容器没锁定宽高比，<img alt="如何用CSS Grid保持图片比例不变？" > 又默认按原始尺寸渲染。
- 别指望 Grid 自动“等比缩放”图片，它不是图像处理引擎
-
<img alt="如何用CSS Grid保持图片比例不变？" >是替换元素，自带固有宽高比，会覆盖你直接写在它身上的aspect-ratio - 常见错误：给
<img alt="如何用CSS Grid保持图片比例不变？" >设width: 100%; height: 100%却不加object-fit，结果就是硬拉伸
正确写法：aspect-ratio 必须加在 grid item 上
每个图片的直接父容器（比如 <div class="grid-item"><img></div>）才是 aspect-ratio 的生效位置。
- 写法：
.grid-item { aspect-ratio: 4 / 3; }—— 不是.grid，也不是img - 必须配合
overflow: hidden，否则object-fit: cover裁剪后可能溢出 - 如果卡片内容为空或极简，Safari 可能渲染高度为 0，加一行
min-height: 0防塌陷 - 容器需是块级或 flex/grid，
display: block或display: grid都行，但不能是 inline
object-fit 选 cover 还是 contain？
这不是样式问题，是语义选择：裁剪还是留白，取决于你要展示什么。
立即学习“前端免费学习笔记（深入）”；
-
object-fit: cover：填满整个容器，居中裁剪 —— 适合封面图、海报、轮播图 -
object-fit: contain：完整显示，四周留白 —— 适合证件照、产品多角度图、需要保留全貌的场景 -
object-fit: fill：强制拉伸，破坏比例 —— 别用，等于废掉aspect-ratio - 记得给
img加display: block，否则height: 100%在 inline 元素上无效
老浏览器兼容怎么办？
iOS 15.3 及更早版本、旧版 Safari 会完全忽略 aspect-ratio，降级为自然高度，视觉崩坏。
- fallback 方案仍是
padding-top百分比 hack：比如 4:3 →padding-top: 75% - 容器设
position: relative; box-sizing: border-box，子层用position: absolute填满 - 用
@supports (aspect-ratio: 1/1)包裹现代写法，避免和 fallback 冲突 - 移动端小屏列数崩坏时，把
1fr换成minmax(0, 1fr)，防止最小内容尺寸干扰比例
最易被忽略的是：图片父容器没设 min-height: 0 导致 Safari 下高度塌陷，以及 object-fit 和 overflow: hidden 搭配缺失造成裁剪溢出——这两处一错，比例就白锁了。
