object-fit和object-position可精确控制图片在容器中的显示效果。使用cover保持宽高比并裁剪以填满容器，配合object-position调整对齐位置，适用于头像、封面等场景；contain完整显示图片但可能留白；fill会拉伸变形应避免；scale-down根据情况选择最小尺寸缩放；none保持原图。现代浏览器支持良好，IE不支持需降级处理。推荐固定尺寸用cover，完整展示用contain，响应式慎用fill。
在网页开发中，图片的显示效果直接影响页面的美观与用户体验。当图片尺寸与容器不匹配时，容易出现拉伸、变形或留白等问题。CSS 提供了 object-fit 和 object-position 两个属性，专门用于精确控制可替换元素（如 <img> 或 <video>）在其容器中的显示方式。
object-fit：定义图片如何适应容器
object-fit 属性决定了图片在其内容框内如何缩放和裁剪，以适应给定的宽高。它有以下几个常用值：
- fill：默认行为。图片拉伸以完全填充容器，不保持宽高比，可能导致变形。
- contain：保持宽高比，图片完整显示在容器内，可能会有空白区域（类似 background-size: contain）。
- cover：保持宽高比，图片缩放至完全覆盖容器，超出部分被裁剪。常用于背景图或头像展示。
- scale-down：效果等同于 contain 和 none 中较小的那个。即如果原始图大于容器，就按 contain 缩小；否则保持原样。
- none：图片保持原始尺寸和比例，不进行任何缩放，可能溢出或留白。
例如，实现一个统一尺寸的用户头像卡片：
.avatar {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 50%;
}
<img src="user.jpg" class="avatar" alt="用户头像">
这样无论上传图片是横图还是竖图，都能居中裁剪并填满圆形区域。
立即学习“前端免费学习笔记（深入）”；
object-position：控制图片在容器中的位置
当使用 object-fit: none 或 contain 时，图片可能不会占满容器，此时可以用 object-position 调整其对齐位置。语法类似于 background-position。
默认值为 50% 50%，即居中显示。你可以通过设置坐标来改变图片的显示区域。
- object-position: top left; —— 图片左上角对齐容器左上角。
- object-position: center bottom; —— 图片底部居中对齐。
- object-position: 20% 30%; —— 横向20%，纵向30%的位置对齐容器中心。
比如你想在封面图中突出人物面部，但人脸偏左，可以手动调整显示区域：
.featured-image {
width: 300px;
height: 200px;
object-fit: cover;
object-position: 30% 50%; /* 将画面左侧重点区域对齐 */
}
兼容性与使用建议
现代浏览器对 object-fit 和 object-position 支持良好，IE 浏览器不支持，旧版 Safari 需要前缀。若需兼容低版本浏览器，可考虑用背景图配合 background-size 和 background-position 替代。
使用建议：
- 头像、商品图等固定尺寸场景推荐
object-fit: cover配合object-position精确定位。 - 需要完整展示图片内容时使用
contain，避免信息缺失。 - 避免在响应式布局中使用
fill，防止图片失真。
基本上就这些。掌握 object-fit 与 object-position，能让你更灵活地处理图片适配问题，提升界面一致性。不复杂但容易忽略。
