object-fit 更靠谱，因它保持图片宽高比且不改变容器尺寸；而 width/height 会强行拉伸。需配合 display: block 使用，并注意 Safari/IE 兼容性及语义化场景选择。
object-fit 为什么比 width/height 更靠谱
直接设 width 和 height 会强行拉伸图片，破坏宽高比；object-fit 是专为替换元素（如 <img alt="CSS如何控制图片的缩放比例_通过object-fit保持宽高比css" >、<video></video>）设计的缩放控制属性，它不改变容器尺寸，只调整内容在容器内的呈现方式。
常见错误现象：img { width: 100%; height: 200px; } 导致图片被压扁或拉长；用 max-width: 100%; height: auto; 又无法限制高度，容器可能被撑开。
-
object-fit: cover：裁剪填满容器，保持宽高比，适合封面图、头像 -
object-fit: contain：完整显示图片，留白填充，适合图表、证件照预览 -
object-fit: fill：拉伸填满（等同于传统写法，慎用） -
object-fit: scale-down：取none和contain中更小的渲染效果，适合响应式 fallback
img 标签必须加 display: block 才能生效
object-fit 在 <img alt="CSS如何控制图片的缩放比例_通过object-fit保持宽高比css" > 上默认不生效，因为 <img alt="CSS如何控制图片的缩放比例_通过object-fit保持宽高比css" > 是内联元素，底部有空白间隙，导致容器高度计算异常，视觉上像没起作用。
使用场景：所有用 object-fit 控制 <img alt="CSS如何控制图片的缩放比例_通过object-fit保持宽高比css" > 的地方，只要父容器有明确高度（比如 height: 200px），就必须处理这个细节。
立即学习“前端免费学习笔记（深入）”；
- 给
<img alt="CSS如何控制图片的缩放比例_通过object-fit保持宽高比css" >加display: block是最轻量解法 - 或者给父容器设
font-size: 0，但会影响子文本，不推荐 - 不适用于
<picture></picture>或背景图，那是background-size的事
兼容性坑：Safari 旧版本和 IE 完全不支持
object-fit 在 Safari ≤ 9、iOS ≤ 9、IE 全系列中无效，会退化为默认拉伸行为。不是“部分支持”，是彻底忽略该声明。
性能影响几乎为零，但兼容性方案要提前想好：
- 用
@supports (object-fit: cover)做特性检测，再包裹样式 - 服务端或构建时生成
cover效果的裁剪图，作为降级 fallback - 避免在关键业务图（如商品主图）上单独依赖
object-fit，无 JS 时不可控
和 background-image 的关键区别在哪
很多人想用 background-image + background-size: cover 替代，但语义和可访问性完全不同。
使用场景判断依据：
- 图片是内容主体（如文章配图、用户上传头像）→ 必须用
<img src="..." alt="CSS如何控制图片的缩放比例_通过object-fit保持宽高比css" >+object-fit - 图片是装饰（如 banner 底纹、卡片角标）→ 用
background-image更合适 -
<img alt="CSS如何控制图片的缩放比例_通过object-fit保持宽高比css" >支持alt、懒加载、自然宽高继承，background-image不参与文档流，也不能被屏幕阅读器识别
容易被忽略的是：当容器宽高由内容撑开时，object-fit 不起作用——它只在容器尺寸固定的前提下工作。这点和 background-size 一致，但新手常误以为“设了就能缩放”。
