object-fit不是“让图片变好看”的开关，而是定义图片在固定容器内如何缩放、裁剪或对齐的规则；若容器无明确宽高或aspect-ratio，object-fit即失效，导致变形。
object-fit 不是“让图片变好看”的开关，而是告诉浏览器：“这张图在固定框里，该怎么缩放、裁剪或对齐”。没框，它就完全不工作。
为什么加了 object-fit: cover 还是变形？
最常见原因：图片容器没有明确尺寸约束。浏览器不知道“框有多大”，object-fit 就无从适配。
-
img自身只设width: 100%，但没设height或aspect-ratio→ 容器高度由图片原始尺寸撑开，object-fit失效 - 父容器用
display: flex或grid，但子项未设min-height或aspect-ratio→ 高度塌陷，尤其在内容为空或加载中时 - 用了浮动（
float）且未清除 → 父容器高度为 0，img实际渲染在文档流外，尺寸失控
✅ 正确做法：先锁住容器比例。推荐用 aspect-ratio: 16 / 9 + width: 100%；老浏览器 fallback 可用 padding-bottom: 56.25% + position: relative + 绝对定位图片。
cover 和 contain 到底该选哪个？
这不是审美选择，而是语义和内容优先级的判断。
-
object-fit: cover：适合封面图、头像、卡片缩略图——要求填满、无留白，允许裁剪。但默认居中裁剪可能切掉人脸或 Logo 关键区域 -
object-fit: contain：适合产品主图、图标、信息图——必须完整可见，留白可接受。此时object-position影响极小，因为整张图都在框内 -
object-fit: fill：会强制拉伸，破坏宽高比。除非刻意做故障艺术，否则一律避免 -
object-fit: scale-down：只在图片原始尺寸大于容器时退化为contain，否则用原始尺寸。适合不确定图源尺寸的组件库场景
⚠️ 注意：cover 下若人物偏上，记得配 object-position: center top；Banner 文字在底部，可用 object-position: center bottom。
object-position 怎么精准调裁剪锚点？
object-position 定义的是“视窗中心点”在图片坐标系中的位置，不是移动图片本身。它的值必须成对出现（水平 + 垂直），单位不能混用。
- 关键词组合：
object-position: left top、center center（默认）、right bottom - 百分比：
object-position: 20% 30%表示以图片横向 20%、纵向 30% 的交点为裁剪中心 - 像素值：
object-position: 10px 20px合法，但响应式下慎用 - 错误写法：
object-position: 20% center（混用单位）、object-position: 20%（缺第二个值）
? 小技巧：Chrome DevTools 的 Elements 面板里，勾选 “Show object position overlay” 可实时拖拽调整并生成对应 CSS 值。
兼容 iOS Safari 13.3 及更早版本怎么办？
-webkit-object-fit 在这些版本中基本无效，硬写会退化为 fill（即拉伸变形）。不能只靠前缀兜底。
- 首选方案：用
background-image替代<img>，配合background-size: cover和background-position。兼容性好，但牺牲alt、SEO、懒加载和语义化 - 次选方案：JS 检测支持性，不支持时动态插入
<picture></picture>+srcsetfallback，或降级为contain+ 固定容器 padding - 底线提醒：Safari 13.3 是 2020 年发布的系统，若项目仍需支持，说明目标用户存在大量旧设备，那 background-image 方案反而更可控
真正容易被忽略的，是把 object-fit 当成独立解药——它必须和容器尺寸、裁剪焦点、资源分辨率三者联动。少一个环节，图片就可能在某个断点、某台设备、某张图源上突然崩形。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
