如何利用CSS的object-fit属性调整响应式图片比例，避免失真？

本文共计1091个文字，预计阅读时间需要5分钟。

图片在响应式容器中可以拉伸变形，本质是 `img` 元素默认按内容尺寸缩放，而父容器宽度较高，变化后 `width: 100%; height: 100%` 会强制压缩原始宽高比。而 `object-fit` 不改变图片原始尺寸，仅控制如何把这张图放进当前框模型中，类似 `background-size` 对背景图的作用。

• object-fit: cover：保持比例，填满容器，溢出部分被剪裁（最常用）
• object-fit: contain：保持比例，完整显示，留白不可避免
• object-fit: fill：直接拉伸填满，会失真，慎用
• object-fit: scale-down：等同于 contain 或 none 中更小的那个效果

注意：object-fit 只对替换元素生效（img、video），对普通 div 里的背景图无效。

img 标签必须设宽高才能让 object-fit 生效

如果 img 没有显式设置 width 和 height（哪怕是 100%），浏览器可能无法确定其渲染盒的尺寸，导致 object-fit 表现不稳定，尤其在 flex/grid 容器中。