object-fit是CSS中控制图片填充容器方式的属性，常用取值有fill、contain、cover、none和scale-down；通过设置img的width和height为100%并结合object-fit:cover或contain，可实现图片在固定容器内的自适应显示，配合object-position可调整裁剪位置；适用于头像、卡片图推荐cover，产品展示用contain，横幅广告可用fill，能有效减少JS干预，提升布局效率。
在网页开发中，图片自适应容器是一个常见需求。使用 object-fit 这个 CSS 属性，可以轻松控制图片在其容器中的显示方式，实现更精准的自适应效果。
object-fit 是什么？
object-fit 用于指定可替换元素（如 img 或 video）的内容如何填充其容器。它类似于 background-size 对背景图的作用，但适用于内联图像元素。
常用的取值包括：
- fill：拉伸图片以填满容器，不保持宽高比
- contain：保持宽高比，完整显示图片，可能会有空白
- cover：保持宽高比，裁剪图片以完全覆盖容器
- none：保持原始尺寸，不缩放
- scale-down：对比 none 和 contain，取较小的那一种效果
如何用 object-fit 实现图片自适应
假设你想让一张图片在一个固定大小的盒子中完美展示，推荐使用 cover 或 contain，具体取决于是否允许裁剪。
立即学习“前端免费学习笔记（深入）”；
示例代码：
@@##@@
关键点说明：
- 给 img 设置 width: 100%; height: 100% 让其撑满容器
- 使用 object-fit: cover 保证图片覆盖整个区域，同时保持比例
- 配合 object-position 可调整裁剪区域（如居中、靠左等）
适用场景建议
不同场景适合不同的 object-fit 值：
- 头像、卡片图：用 cover 避免变形，确保视觉统一
- 产品展示图：用 contain 完整显示，留白也没关系
- 横幅广告：用 fill 强制铺满（注意可能失真）
基本上就这些。合理使用 object-fit 能大幅减少 JavaScript 或额外标签来处理图片适配的问题，简洁又高效。
