必须为 grid-item 设置 aspect-ratio，否则 object-fit 失效；需在 grid-item 上设 aspect-ratio，在 img 上设 width/height 100%、object-fit 和 display: block，并用 minmax 实现响应式，旧版 safari 需 padding-top 降级。
grid-item 必须设 aspect-ratio，否则图片再怎么调都没用
90% 的“图片拉伸”问题，根源不是 object-fit 写错了，而是 grid-item 本身没尺寸——它只是个空盒子，浏览器连缩放基准都找不到。Grid 轨道只分配空间，不给子项设宽高，img 就按原始像素渲染，object-fit: cover 完全失效。
正确做法是直接在 grid item 元素上写：
.grid-item {
aspect-ratio: 16 / 9;
}
这样宽度变，高度自动按比例撑开，为图片提供稳定容器空间。注意：aspect-ratio 必须作用于 grid-item（比如 <div class="grid-item">），写在 grid 容器（<code>.grid）上毫无意义。
object-fit 必须写在 img 上，且配 width: 100%; height: 100%
object-fit 是替换元素专属属性，只对 <img>、<video></video> 等生效。写在父容器上（比如 .grid-item { object-fit: cover; }）完全无效。
同时，img 必须显式占满父容器，否则 object-fit 没作用对象：
-
width: 100%+height: 100%缺一不可 - 加
display: block防止 inline 默认基线间隙干扰高度计算 - 推荐加上
object-position: center（或top、50% 30%）手动控制裁切锚点，尤其人脸/Logo 常偏上
.grid-item img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
响应式列数要用 minmax()，别写死像素
写 grid-template-columns: 200px 200px 看似整齐，小屏下要么横向滚动，要么图片被压缩变形。真正的自适应靠弹性约束：
- 用
repeat(auto-fill, minmax(250px, 1fr))：每列最小 250px，多出来的空间均分 - 配合
gap控制间距，避免图片边缘紧贴 - 加
overflow: hidden在.grid-item上，防止cover裁剪后内容溢出
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
}
旧版 Safari（iOS 15.3 及更早）需要 padding-top 降级方案
aspect-ratio 在 Chrome 88+、Firefox 89+、Safari 15.4+ 支持良好，但 iOS 15.0–15.3 会完全忽略它，降级为自然高度——如果你的用户还有大量这类设备，必须兜底。
原理是利用「块级元素的 padding-top 百分比基于父宽计算」这一特性：
- 16:9 →
padding-top: 56.25%（9 ÷ 16 × 100） - 容器设
position: relative，img设position: absolute并铺满 - 加
min-height: 0防父容器塌陷
@supports not (aspect-ratio: 16 / 9) {
.grid-item {
position: relative;
min-height: 0;
}
.grid-item::before {
content: "";
display: block;
padding-top: 56.25%;
}
.grid-item img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
真正麻烦的不是写法本身，而是容易漏掉两个细节：一是 display: block 导致的基线间隙，二是旧版 Safari 下 aspect-ratio 彻底不生效却没 fallback —— 这两点一旦忽略，图片在部分设备上就必然失真。
