图片在grid中易变形，因img作为替换元素默认width/height:auto，不自动适配轨道尺寸；需用object-fit配合明确宽高约束（如width:100%;height:100%）并根据需求选cover（裁剪填满）或contain（等比留白）。
直接用 img 套在 display: grid 容器里，不加额外处理，90% 的情况下图片会拉伸、错位或留白——这不是图片本身的问题，而是栅格项尺寸和图片固有宽高比没对齐。
为什么 img 在 grid 里容易变形
Grid 容器按轨道分配空间，但 img 默认 width: auto; height: auto，它既不会自动拉满列宽，也不会保持原始比例填满网格项。常见现象包括：
- 图片被网格项裁切（
overflow: hidden且未设object-fit） - 图片撑开网格项高度，导致整行错位（尤其多张图高度不一致时）
- 小图在大网格项中居左显示，右侧大片留白
根本原因：浏览器把 img 当作「替换元素」，其尺寸计算逻辑独立于父级 grid 轨道，除非显式约束。
object-fit 和 width/height 怎么选
关键不是“哪个更好”，而是“匹配你的内容意图”：
- 要图片完整可见、不裁剪 → 用
object-fit: contain+width: 100%; height: 100%，但需确保父项有明确高度（如min-height: 200px） - 要填满网格项、允许裁剪 → 用
object-fit: cover+width: 100%; height: 100%，这是商品卡片最常用组合 - 想保留原始尺寸、居中显示 → 用
width: auto; height: auto; max-width: 100%; max-height: 100%，但得配合margin: auto居中
注意：object-fit 对 img 有效，但对背景图要用 background-size；且 IE11 不支持，需降级方案。
响应式图片（srcset）和栅格怎么协同
栅格决定“占几列”，srcset 决定“加载哪张图”，两者必须对齐物理宽度预期：
- 别写
srcset="small.jpg 320w, medium.jpg 768w"然后放在minmax(280px, 1fr)的列里——280px 是逻辑像素，实际 DPR=2 时是 560 物理像素，但浏览器查320w时可能误判 - 推荐用
vw单位反推：如果网格项最大宽度约 33.33vw（三列），那srcset应覆盖33vw对应的物理尺寸，例如"small.jpg 400w, medium.jpg 800w, large.jpg 1200w" - 务必配
sizes：比如sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"，让浏览器知道每个断点下这张图大概占多宽
漏掉 sizes，srcset 就退化为普通 src，失去响应式意义。
移动端图片顺序重排（如图文上下切换）的陷阱
用 Bootstrap 5 的 order- 类或自定义 grid-row 控制顺序时，最容易忽略的是「语义结构」和「可访问性」：
- HTML 中图片仍应放在文字之后（语义优先），靠 CSS 重排视觉顺序；否则屏幕阅读器会先读图再读文，逻辑断裂
-
order只影响视觉流，不影响 DOM 顺序和 tab 键焦点流，若没同步调整tabindex或用aria-labelledby，键盘用户会迷失 - 在
grid中用grid-row: 1把图片提到第一行，但文字还在第二行？小心grid-auto-rows未设最小高度，导致文字区域塌陷
真正难的不是让图片“看起来”在上面，而是让它在所有交互路径里都处于合理位置——这需要 HTML、CSS、ARIA 三者对齐，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
