object-fit有5个值，实用的是fill、contain、cover、scale-down：fill强制拉伸变形；contain等比缩放留黑边；cover等比填满可能裁剪；scale-down取none与contain中较小者；none无效不推荐。
object-fit 的可选值有哪些，各自效果怎么区分
直接说结论：object-fit 有 5 个合法值，但真正实用的只有 fill、contain、cover、scale-down 这 4 个。none 基本等于没设，不推荐用。
它们的区别核心在「如何对待原始宽高比」：
-
fill：强制拉满容器，完全不管原图比例，必然变形 -
contain：等比缩放，完整显示整张图，留黑边（常见于头像上传预览） -
cover：等比缩放，填满容器，可能裁剪边缘（最常用，如 banner 图、卡片图） -
scale-down：取none和contain中更小的尺寸渲染，适合不确定图源尺寸的场景
为什么加了 object-fit 还是变形？常见漏掉的条件
关键点：object-fit 只对「替换元素」生效，比如 <img>、<video></video>。它对 background-image 完全无效 —— 那得用 background-size。
另一个高频遗漏：父容器没设宽高，img 默认是 inline 元素，会按内容宽高撑开，此时 object-fit 没作用对象。必须确保容器有明确尺寸：
- 给
<img>父元素（如<div>）设 <code>width和height - 或直接给
<img>设宽高（但注意这会覆盖原始尺寸，建议用max-width: 100%+height: auto配合object-fit） - 别忘了
display: block，避免 inline 下的基线留白干扰布局
cover 模式下怎么控制裁剪方向？
object-fit: cover 本身不指定裁哪边，它只保证等比缩放后居中填满。裁剪起始位置由 object-position 控制，默认是 50% 50%（居中）。你可以手动调整：
img {
object-fit: cover;
object-position: top center; /* 顶部对齐，裁掉底部 */
width: 300px;
height: 200px;
}
常用组合还有 left center（裁右边）、bottom right（裁左上），写法和 background-position 一致，支持像素、百分比、关键词。
兼容性要注意什么？特别是老版本 iOS
object-fit 在 Chrome 31+、Firefox 36+、Edge 16+ 都没问题，但 iOS Safari 直到 10.3 才支持。如果你要兼容 iOS 10 以下（比如某些企业内网场景），不能只靠它。
稳妥方案是降级处理：
- 用
@supports (object-fit: cover)包裹现代写法 - 外面写一层 fallback：比如用
background-image+background-size: cover，再通过<img>的src属性做图片加载兜底 - 注意：Safari 9/10 对
object-position支持不全，设了可能被忽略
实际项目里，如果目标用户基本都在 iOS 11+，就放心用；否则得搭配 JS 检测或构建时插件补 CSS。
