正在加载...

CSS object-fit

Float 让文字绕着媒体流动。object-fit 回答另一个媒体问题：当 img 或 video 放在固定尺寸的框里时，内容应如何填满这个框？先掌握 cover 与 contain，再考虑用 fill 拉伸人脸。

object-fit 工具箱

📊 object-fit 一览

取值	日常用途
`fill`	拉伸到框——可能扭曲宽高比
`contain`	完整装入媒体；可能留出空白带
`cover`	填满框；可能裁切边缘
`none`	保持固有尺寸；可能溢出或留空
`scale-down`	类似 none 或 contain——取较小者
`object-position`	指定裁切/适配时哪一部分保持可见

只有当替换元素具有明确的宽高（或两轴都受约束）时，object-fit 才真正起作用。高度为 auto 的自由流动图片没有可「装入」的框。

Cover——填满画框，允许裁切

卡片与主视觉缩略图常常希望框内每个像素都被填满。cover 放大并裁掉溢出。方形框搭配 cover 可做出整齐网格。

Cover card image

css

.card__media {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}

Contain——显示整张图

产品图与示意图往往必须完整可见。比例不同时，contain 会留出空白带（letterbox）——留空白带也好过切掉 logo。

Contain product shot

css

.product__img {
width: 240px;
height: 240px;
object-fit: contain;
background: #f7f7f7;
}

Fill 会拉伸——谨慎使用

fill 强制媒体贴合框尺寸，即使比例变形。适合抽象纹理；用于人脸、logo 与图表则有风险。

Fill stretch warning

css

.texture {
width: 320px;
height: 120px;
object-fit: fill;
}

object-position 瞄准裁切区域

当 cover 裁切时，默认居中可能挡住人脸或 logo。用 object-position 微调——百分比或 top、left 等关键字。

Position the important part

css

.avatar {
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
object-position: 50% 20%;
}

从容的 object-fit 习惯

有意义的媒体用真正的 <img> / <video> 配合 object-fit。图片只是装饰性 CSS 外观时再用 background-size。先定框尺寸，再选 cover 或 contain，最后微调位置。

Avatar habit

css

.avatar {
width: 64px;
height: 64px;
object-fit: cover;
object-position: center top;
border-radius: 50%;
}

自己动手试

给图片固定宽高，然后对比 cover 与 contain。
用 cover 做圆形头像，并移动 object-position。
用一次 fill，观察变形——再换回去。
把同一裁切与 CSS background-size: cover 装饰对比。
写一句话：什么时候 contain 比 cover 更安全？

常见错误

没有定尺寸的框却指望 object-fit 生效
在肖像与 logo 上使用 fill
把本课与 float 环绕或 position 偏移混淆
把有意义的照片只放进 background-image（alt 更难）
cover 挡住主体时忘记 object-position

小结

object-fit 把替换媒体装进有尺寸的框
cover 填满并可能裁切；contain 显示全部并可能留空白带
fill 可能变形——少用
object-position 瞄准可见区域
内容媒体优先 object-fit；装饰用 background-size

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓

问题

🎯

70%

及格要求

♾️

∞

时间

🔄

∞

尝试次数

📝 说明

仔细阅读每个问题
为每个问题选择最佳答案
您可以随时重新参加测验
您的进度将显示在顶部

语言