object-fit 必须作用于 img 元素自身，且需同时设置 width 和 height 才生效；错误地写在父容器或缺少尺寸约束会导致无效。
只加 object-fit: cover 没用，图片照样拉伸——根本原因是它没被加在正确元素上，或没配齐生效条件。
为什么 object-fit 写在网格项上完全无效
object-fit 只对替换元素（<img>、<video></video>）生效，对普通 <div> 完全无视。很多人把样式写成：<pre class="brush:php;toolbar:false;">.grid-item { object-fit: cover; }</pre>
<p>浏览器直接忽略，毫无反应。</p>
<ul>
<li>✅ 正确写法：<code>.grid-item img { object-fit: cover; }
.grid-item { object-fit: cover; } 或 .grid-item > * { object-fit: cover; }
width/height 就能“传导”给子 img——object-fit 必须作用于 img 自身
width 和 height 必须同时设，否则 object-fit 不触发
object-fit 的行为依赖元素有明确的渲染尺寸框。只写 width: 100%，不设 height，浏览器仍按默认宽高比缩放，cover 无法介入。
- ✅ 推荐组合：
width: 100%; height: 100%;（需父容器高度可计算） - ✅ 更稳妥组合：
width: 100%; height: auto;+object-fit: contain;（适合图标、示意图） - ⚠️ 避免：
height: 100%单独使用——若父级是grid-template-rows: auto或未设高度，100%计算结果为0，object-fit直接失效
Grid 轨道尺寸不稳定时，object-fit 会“暂时失灵”
当行高用 auto、minmax(auto, 1fr)，或网格项靠内容撑开时，<img> 渲染初期可能拿不到最终高度，导致 object-fit 初期不工作（尤其 SSR 或懒加载场景）。
- ✅ 稳住高度的实操方式：
– 给网格项设min-height: 200px
– 用aspect-ratio: 4 / 3替代固定height，再配width: 100%
– 显式定义grid-template-rows: 200px或1fr（但需确保父容器有高度） - ❌ 别依赖
align-items: stretch（Grid 默认值）却不约束行高——这会让图片被无限制拉伸 - 调试技巧：临时加
outline: 1px solid red到img上，看清它真实占位是否符合预期
裁得不准？别调 align-self，改 object-position
align-self 控制的是整个 <img> 元素在网格项内的位置，不是图片内容在自身框里的锚点。把它设成 end 并不会“露出更多脸”，只会把整张图往下推，顶部被切掉。
- ✅ 调裁剪区域用
object-position：
– 头像保脸：object-position: center top;
– 突出底部内容：object-position: center bottom;
– 支持关键词、百分比（20% 30%）、像素（10px 20px） - ⚠️ 注意：
object-position在 Safari 9/10 中支持不全，设了可能被忽略；iOS Safari 10.3+ 才完整支持object-fit - 移动端模糊不是
object-fit能解决的——低分辨率图在 Retina 屏上放大必然模糊，得靠srcset或更高像素源图
最常被忽略的点：你调了半天 object-fit，却忘了检查图片本身是不是被 width/height 像素值硬性拉伸过；或者网格项用了 overflow: hidden 却没配 object-fit，结果只是粗暴裁切，不是智能适配。
