30-seconds-of-code CSS 技巧：用 object-fit 与 object-position 将图片完美适配容器-育师

教程
文档

【免费下载链接】30-seconds-of-code

Coding articles to level up your development skills

项目地址：https://gitcode.com/gh_mirrors/30/30-seconds-of-code

在 Web 布局中，图片的宽高比与容器尺寸不一致是家常便饭：横向图塞进纵向卡片、缩略图放进固定尺寸的网格、用户头像需要裁切……本文围绕 30-seconds-of-code 仓库中的 fit-image-in-container 这一 CSS 技巧，系统讲解如何用object-fit与object-position两个属性，在不破坏图片原始比例的前提下，让图片从容地"适应"任意容器。读完本文，你将掌握contain、cover两种主流适配策略的差异、object-position的定位语法，并了解它们在仓库其他文章中的真实应用场景。

为什么需要"适配"而不是"拉伸"

默认情况下，<img>元素会按自身的固有尺寸（intrinsic size）渲染。当你在 CSS 中强行设置width和height后，图片会被拉伸或压缩以填满该尺寸，导致画面变形——这在产品图、人物照片上尤其明显。而object-fit与object-position正是为此而生：它们控制图片内容在元素内容框（content box）内部的呈现方式，让你既能限定元素的盒模型尺寸，又能保住图片的原始比例。

需要特别说明的是，这对属性只对替换元素（replaced elements）生效，最常见的应用对象就是<img>、<video>、<canvas>等。对普通元素，这套写法不会起作用。

object-fit 的核心取值

object-fit决定图片内容如何填充元素盒子。CSS 规范中一共有五个取值，其中contain与cover是日常使用频率最高的两个：

取值	行为	效果说明
`fill`	拉伸填充	默认行为，图片被拉伸到完全填满盒子，不保证宽高比，可能变形
`contain`	完整容纳	整张图片完整放入盒子内，保持宽高比，多余空间留白
`cover`	覆盖填满	图片铺满整个盒子，保持宽高比，超出部分被裁切
`none`	原始尺寸	不缩放，按图片固有尺寸渲染，超出部分溢出
`scale-down`	取较小者	等效于`none`与`contain`中呈现结果更小的那个

原文档对最常用的两种模式给出了精辟总结：contain让"整张图片"都看得见，cover让"整个容器"都被填满。二者都严格保持宽高比，区别只在于"留白"还是"裁切"。

/* 完整展示整张图片，居中于容器 */ .image-contain { object-fit: contain; } /* 填满容器，裁掉超出部分 */ .image-cover { object-fit: cover; }

object-position：控制图片在盒子里的位置

当contain产生留白、或cover发生裁切时，图片内容在盒子内的落点由object-position决定。它支持与background-position相同的语法体系：

位置关键字：top、bottom、left、right、center，可两两组合，如right top表示右上角；
百分比值：默认50% 50%（即居中），如0% 0%对齐左上角；
长度值：如px、em等，直接偏移。

原文档给出的一对示例非常直观：

/* 图片完整居中显示 */ .image-contain { object-fit: contain; object-position: center; } /* 图片铺满容器，并聚焦于右上区域 */ .image-cover { object-fit: cover; object-position: right top; }

object-position: right top这类用法在头像、商品图等需要"突出画面某一区域"的场景特别实用——比如人像照片用cover铺满方形容器时，配合center top可以尽量保留头部区域，避免把主体裁出画面。

一个完整可运行的实战示例

把原文档的两段代码合并进一个真实页面，即可验证效果：给容器设定固定尺寸，再让图片用不同策略适配。

<div class="frame"> <img class="image-contain" src="/path/to/image.jpg" alt="contain 效果图"> </div> <div class="frame"> <img class="image-cover" src="/path/to/image.jpg" alt="cover 效果图"> </div>

.frame { /* 固定容器尺寸，模拟真实布局中的卡片、网格单元 */ width: 320px; height: 200px; overflow: hidden; } .frame img { /* 关键：让图片尺寸跟随容器，而不是固有尺寸 */ width: 100%; height: 100%; display: block; } .image-contain { object-fit: contain; object-position: center; } .image-cover { object-fit: cover; object-position: right top; }

在width: 100%; height: 100%的配合下，object-fit才会按容器尺寸进行缩放计算。原文档中的这个例子在仓库中对应交互示例，读者可以打开content/snippets/css/s/fit-image-in-container.md查看原始写法。

仓库源码中的真实应用佐证

object-fit并非孤立技巧，它在 30-seconds-of-code 的多个 CSS 文章中反复出现，恰好印证了它的实战价值：

在 horizontal-vertical-gallery 的横向/纵向图片画廊中，幻灯片图片统一设置了width: 540px与object-fit: contain（见该文.slides img规则），保证不同比例的图片在固定宽度的滑动轨道里不拉伸、不变形；
在 card-image-cutout 的圆形裁切卡片中，头像图片使用object-fit: cover配合border-radius: 50%，把任意比例的图片裁成圆形而保持主体完整；
在 hover-additional-content 的悬停展开卡片中，图片同样通过object-fit: cover填满固定尺寸的卡片头部区域。

此外，仓库的语言资源文件 content/languages/css.yaml 中为object-fit、object-fit: contain、object-fit: cover与object-position均维护了可引用的参考条目，说明该项目把这一技巧视为 CSS 知识库中的一等公民；包含该技巧的文档位于 CSS 视觉类文章集合与 CSS 布局类文章集合的覆盖范围内。

如何选择：contain 还是 cover？

选型逻辑其实取决于"必须展示什么"：

必须看到完整内容（产品全貌、地图截图、长截图）→ 用contain，接受留白；
必须填满区域（轮播图、封面、头像、卡片背景图）→ 用cover，接受裁切。

在实际工程中，cover的使用频率通常更高，因为响应式布局里的图片大多只是"氛围填充"，主体裁切无伤大雅；而contain更适合"信息完整性优先"的展示场景。两者都与容器本身是否设置overflow: hidden无关——object-fit的裁切发生在替换元素内部，不需要额外的溢出处理。

小结

object-fit与object-position是 CSS 处理图片适配问题的标准答案：前者决定"怎么缩放"，后者决定"往哪对齐"，二者配合width: 100% / height: 100%即可让任意宽高比的图片优雅地栖身于任意尺寸的容器。这套技巧已被 30-seconds-of-code 仓库收录为独立文章（fit-image-in-container），并在画廊、卡片等更复杂的布局文章中持续复用，值得直接内化为你的布局基本功。