object-fit 是控制替换元素内容缩放与裁剪的 CSS 属性，需配合 width/height 或 aspect-ratio 使用；fill 变形填充，contain 等比留白，cover 等比裁剪，scale-down 智能缩放。

object-fit 是什么，为什么不用 width/height 百分比

object-fit 用于控制 <img alt="css布局中如何控制图片在容器中自适应_使用object-fit属性" > 或 <video></video> 等替换元素在其容器内的缩放与裁剪行为。它不改变元素本身尺寸，只影响内容如何“装入”已设定的宽高框内。单纯用 width: 100%; height: 100% 会强行拉伸图片、破坏宽高比，而 object-fit 在保持容器尺寸固定的前提下，提供更可控的适配策略。

常用值对比：fill / contain / cover / scale-down

不同值对应不同场景，选错会导致意外裁剪或留白：

• fill：完全填满容器，**无视原始宽高比**，必变形
• contain：等比缩放，确保全部内容可见，**可能留白**（常见于头像预览、图标容器）
• cover：等比缩放并**填满容器，超出部分裁剪**（最常用，如 banner 图、卡片封面）
• scale-down：在 none 和 contain 中取更小尺寸效果，仅当原图比容器大时才缩放

必须配合 width/height 或 aspect-ratio 才生效

object-fit 不会自动让容器有尺寸；如果父容器没设宽高，img 仍按原始尺寸渲染，object-fit 就无从谈起。常见写法：

.card-img {
  width: 100%;
  height: 200px;        /* 必须指定高度，否则 cover/contain 无效 */
  object-fit: cover;
}

现代方案可搭配 aspect-ratio 避免固定像素高度：

jm-jsjkxyjs02-zlm-405

使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。

下载

立即学习“前端免费学习笔记（深入）”；

.responsive-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

IE 不支持，需要 fallback 时注意 img 的默认行为

IE 完全不识别 object-fit，会回退到原生 img 渲染逻辑（即按 intrinsic size 显示）。若需兼容 IE：

• 不要依赖 object-fit: cover 实现裁剪效果，改用背景图 + background-size: cover
• 若坚持用 <img alt="css布局中如何控制图片在容器中自适应_使用object-fit属性" >，可通过伪元素遮罩或 JS 动态计算裁剪区域，但成本高
• 注意：Safari 旧版本（≤ iOS 9.3）对 object-fit 支持不完整，scale-down 可能失效

真正容易被忽略的是：即使写了 object-fit: cover，如果容器没有明确的块级尺寸上下文（比如 flex item 未设 min-width: 0 或被父级 overflow: hidden 干扰），实际渲染仍可能异常。先确认容器“真有尺寸”，再调 object-fit。