CSS object-fit 图片适配
contain/cover/fill/none/scale-down 控制图片填充 · 难度：入门 · +15XP
CSS object-fit —— 让图片完美适配容器
当图片的宽高比和容器不匹配时，图片会被拉伸变形。object-fit控制图片如何填充容器，类似background-size。
五个值对比
img { width: 300px; height: 200px; }
.contain { object-fit: contain; } /* 完整显示，留白 */
.cover { object-fit: cover; } /* 填满容器，裁剪多余 */
.fill { object-fit: fill; } /* 拉伸填满（默认，会变形）*/
.none { object-fit: none; } /* 保持原始尺寸 */
.scale-down { object-fit: scale-down; } /* contain和none中选小的 */
| 值 | 效果 | 适用 |
|---|---|---|
| cover | 填满容器，裁剪多余 | 头像、卡片封面 |
| contain | 完整显示，留白 | 产品图、logo |
| fill | 拉伸变形 | 不推荐 |
动手练习
- 基础练习：准备一张横图和一张竖图，放入固定宽高的容器中，分别测试object-fit的五个值。
- 进阶应用：做一个统一尺寸的员工头像墙——各种尺寸的头像用object-fit:cover统一显示。
- 项目实战：在商品列表页用object-fit:cover让所有商品图保持一致的展示效果。