object-fit: cover单独使用无效，必须配合父容器（grid item）明确宽高或aspect-ratio约束、img设width:100%和height:100%、display:block及overflow:hidden，否则无“盒子”可适配而失效。
只加 object-fit 没用，必须让 img 有明确可适配的盒子——也就是它的父容器（grid item）得先有宽高或比例约束。
为什么 object-fit: cover 加了却没效果
根本不是属性写错了，而是 img 没“盒子”可适配。Grid 轨道分配空间，但不给 grid item 设尺寸；如果 item 是 display: contents、没写 width/height、或高度靠内容撑开，object-fit 就完全不触发。
-
img必须同时设width: 100%和height: 100%，缺一不可；只写width: 100%时，height: auto会让浏览器忽略object-fit - 推荐把
aspect-ratio: 4 / 3写在 grid item（比如.gallery-item）上，而不是img上 -
img { display: block }要加上，否则 inline 默认基线对齐会在底部留空白，干扰高度计算
overflow: hidden 是 cover 的硬性搭档
object-fit: cover 只负责缩放和裁剪逻辑，不控制溢出行为。被裁掉的部分默认仍占据空间，会撑破格子、压到隔壁图，尤其在 gap 小或嵌套布局里特别明显。
- 必须把
overflow: hidden加在 grid item（即img的直接父容器）上，不是加在img自身 - 如果 grid item 里还有文字或按钮，加
overflow: hidden可能误切内容——这时优先改用object-fit: contain，或调整object-position - 别指望
grid-auto-rows: 200px来兜底：移动端小屏下会把图压扁，aspect-ratio才是响应式核心
不同场景选错 object-fit 值等于白配
object-fit 不是开关，是策略。值选错，封面图切掉人脸，产品图留大片白边，都算失效。
-
object-fit: cover：等比缩放+裁剪填满，适合头图、卡片封面；必须配object-position: center（默认）或top控制焦点，人像慎用center center，建议50% 20%把头顶留在可视区 -
object-fit: contain：等比缩放+完整显示，留白由背景色填充，适合证件照、UI 图标、技术截图 -
object-fit: fill：强制拉伸，就是你看到的“脸变宽、天空压扁”的元凶，除非明确接受形变，否则别用 -
object-fit: scale-down：取none和contain中更小的那个，适合图源尺寸不确定的响应式兜底
响应式断点下裁剪突变怎么稳住
同一张图在 minmax(200px, 1fr) 网格中，小屏单列裁上半身、大屏三列又显太空——这不是 bug，是 cover 严格按当前容器尺寸重算缩放的结果。
- 窄列（如
minmax(120px, 1fr)）慎用人像类图配cover，裁剪风险太高 - 用媒体查询微调：
@media (max-width: 480px) { img { object-fit: contain; } } - 真正容易被忽略的是图片分辨率本身：哪怕
object-fit: cover完全正确，如果原图只有 300px 宽，而格子在 Retina 屏上占 600 CSS 像素，放大后必然模糊——这得靠srcset或更高清源文件解决
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
