object-fit 仅控制图片在容器中的渲染显示方式，不修改原始文件；生效前提为容器有明确宽高约束，且图片正常加载；cover 裁剪填满，contain 完整留白，scale-down 安全兜底，object-position 配合调整焦点位置。

object-fit 不是裁剪图片文件本身，它只控制 标签内图片内容在容器中的显示方式。想上传时自动裁剪？那得靠后端或前端 Canvas 处理，object-fit 做不到。

为什么设置了 object-fit: cover 却没效果？

最常见原因是容器没有明确的尺寸约束：

• width 和 height 必须同时设置（或用 aspect-ratio + width），否则浏览器无法确定“要适配到多大的框里”
• 父容器是 display: flex 且未设高度时， 的 height 可能塌陷为 0 —— 检查开发者工具中 computed height 是否真为非零值
• 图片加载失败、404 或跨域（CORS）导致渲染中断，object-fit 不会生效 —— 先确保 能正常显示原始图

object-fit: cover 和 object-fit: contain 怎么选？

取决于业务对“完整性”和“填充性”的优先级：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• 用 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 下无效

真正容易被忽略的是：所有这些控制都只作用于渲染层，原始 文件完全没变。如果你后续要 canvas 导出、截图或上传裁剪后区域，得额外用 drawImage 手动截取 —— object-fit 不会产生新图像数据。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！