object-fit 仅控制图片在容器中的渲染显示方式，不修改原始文件；生效前提为容器有明确宽高约束，且图片正常加载；cover 裁剪填满，contain 完整留白，scale-down 安全兜底，object-position 配合调整焦点位置。
object-fit 不是裁剪图片文件本身，它只控制 <img alt="HTML怎么用object-fit_html object-fit图片裁剪适应【常见问题】" > 标签内图片内容在容器中的显示方式。想上传时自动裁剪？那得靠后端或前端 Canvas 处理，object-fit 做不到。
为什么设置了 object-fit: cover 却没效果？
最常见原因是容器没有明确的尺寸约束：
-
width和height必须同时设置（或用aspect-ratio+width），否则浏览器无法确定“要适配到多大的框里” - 父容器是
display: flex且未设高度时，<img alt="HTML怎么用object-fit_html object-fit图片裁剪适应【常见问题】" >的height可能塌陷为0—— 检查开发者工具中 computed height 是否真为非零值 - 图片加载失败、404 或跨域（CORS）导致渲染中断，
object-fit不会生效 —— 先确保<img alt="HTML怎么用object-fit_html object-fit图片裁剪适应【常见问题】" >能正常显示原始图
object-fit: cover 和 object-fit: contain 怎么选？
取决于业务对“完整性”和“填充性”的优先级：
- 用
cover：卡片式布局、封面图、Banner 图 —— 要填满容器，允许裁剪（比如人脸被切掉半张没关系） - 用
contain：证件照、图标、数据图表截图 —— 必须完整可见，留白可接受 - 别用
fill：它强制拉伸，100% 变形，除非你明确需要“压扁/拉长”效果 -
scale-down是安全兜底：当图片可能比容器小（如用户上传小头像），又不想让它被放大失真时，它会在none和contain之间选更小的那个渲染结果
object-position 怎么配合用才不偏移重点？
object-position 默认是 center center，但很多图的重点不在正中心（比如人像通常上半身更重要）：
立即学习“前端免费学习笔记（深入）”；
- 想让头顶不被裁掉？试试
object-position: center top - 产品图底部有 logo？用
object-position: center bottom - 支持百分比和像素值：
object-position: 20% 30%表示横向 20%、纵向 30% 处为焦点 - 注意：它只在
object-fit为cover、contain、scale-down时才有意义；fill和none下无效
真正容易被忽略的是：所有这些控制都只作用于渲染层，原始 <img src alt="HTML怎么用object-fit_html object-fit图片裁剪适应【常见问题】" > 文件完全没变。如果你后续要 canvas 导出、截图或上传裁剪后区域，得额外用 drawImage 手动截取 —— object-fit 不会产生新图像数据。
