object-fit不改变盒模型，只控制图片内容在已定尺寸容器内的缩放与裁剪方式；需先明确img宽高约束（如width:100%;height:200px）才生效。

object-fit 不改变盒模型，只控制内容渲染方式

很多人误以为 object-fit 会修改 img 元素自身的盒模型（比如影响 width/height 计算或触发重排），其实它完全不碰盒模型——它只决定「图片内容」如何在已确定尺寸的框里缩放、裁剪或定位。真正起作用的前提是：该 img 已被赋予明确的尺寸约束（如 width: 100% + height: 200px），否则 object-fit 直接静默失效。

fill 和 contain 的视觉差异本质是缩放策略不同

两者都要求图片填满容器尺寸，但缩放逻辑截然相反：

• object-fit: fill：强制拉伸图片宽高分别匹配容器宽高，彻底丢弃原始宽高比。哪怕原图是 1:1，容器是 16:9，也会被硬压成 16:9 —— 这就是变形根源
• object-fit: contain：按比例缩放图片，使「图片的长边」刚好贴合容器对应边，短边自动留白。它优先保比例，不保填充，所以不会变形，但会出现上下/左右空白

关键区别不在“是否撑满盒子”，而在“是否尊重原始比例”。fill 是暴力适配，contain 是安全缩放。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

为什么加了 object-fit: contain 还是没效果？常见三处遗漏

不是属性写错了，而是容器或图片本身没给它干活的机会：

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

• 父容器没设 width 或 height（只设 max-width 不够），img 按原始尺寸渲染，object-fit 无从介入
• img 没设 width: 100% 或 height: 100%，它就不会去“尝试填满”那个有尺寸的容器
• 忘了清除 img 默认的 vertical-align: baseline，导致底部多出几像素空白，看起来像“没居中”或“留白异常”

cover 和 contain 都等比，但 cover 为什么常被误认为“更智能”？

cover 看似更“省心”——它确实总能填满且不拉伸，但代价是不可控裁剪。而 contain 的留白是确定的、可预期的。容易被忽略的是：cover 下的关键信息（比如人脸）可能被切掉，这时必须配合 object-position 微调，例如 object-position: center top 把焦点往上提；而 contain 虽然留白，却始终完整保留全部内容。选哪个，取决于你更怕“看不见”还是“填不满”。