object-fit 更靠谱，因它保持图片宽高比且不改变容器尺寸；而 width/height 会强行拉伸。需配合 display: block 使用，并注意 Safari/IE 兼容性及语义化场景选择。

object-fit 为什么比 width/height 更靠谱

直接设 width 和 height 会强行拉伸图片，破坏宽高比；object-fit 是专为替换元素（如 、）设计的缩放控制属性，它不改变容器尺寸，只调整内容在容器内的呈现方式。

常见错误现象：img { width: 100%; height: 200px; } 导致图片被压扁或拉长；用 max-width: 100%; height: auto; 又无法限制高度，容器可能被撑开。

• object-fit: cover：裁剪填满容器，保持宽高比，适合封面图、头像
• object-fit: contain：完整显示图片，留白填充，适合图表、证件照预览
• object-fit: fill：拉伸填满（等同于传统写法，慎用）
• object-fit: scale-down：取 none 和 contain 中更小的渲染效果，适合响应式 fallback

img 标签必须加 display: block 才能生效

object-fit 在 上默认不生效，因为 是内联元素，底部有空白间隙，导致容器高度计算异常，视觉上像没起作用。

使用场景：所有用 object-fit 控制 的地方，只要父容器有明确高度（比如 height: 200px），就必须处理这个细节。

• 给 加 display: block 是最轻量解法
• 或者给父容器设 font-size: 0，但会影响子文本，不推荐
• 不适用于 或背景图，那是 background-size 的事

兼容性坑：Safari 旧版本和 IE 完全不支持

object-fit 在 Safari ≤ 9、iOS ≤ 9、IE 全系列中无效，会退化为默认拉伸行为。不是“部分支持”，是彻底忽略该声明。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

性能影响几乎为零，但兼容性方案要提前想好：

• 用 @supports (object-fit: cover) 做特性检测，再包裹样式
• 服务端或构建时生成 cover 效果的裁剪图，作为降级 fallback
• 避免在关键业务图（如商品主图）上单独依赖 object-fit，无 JS 时不可控

和 background-image 的关键区别在哪

很多人想用 background-image + background-size: cover 替代，但语义和可访问性完全不同。

使用场景判断依据：

• 图片是内容主体（如文章配图、用户上传头像）→ 必须用 + object-fit
• 图片是装饰（如 banner 底纹、卡片角标）→ 用 background-image 更合适
• 支持 alt、懒加载、自然宽高继承，background-image 不参与文档流，也不能被屏幕阅读器识别

容易被忽略的是：当容器宽高由内容撑开时，object-fit 不起作用——它只在容器尺寸固定的前提下工作。这点和 background-size 一致，但新手常误以为“设了就能缩放”。

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