用object-fit可解决图片变形问题，需配合明确宽高；contain等比缩放留白，cover等比裁剪填满，fill会拉伸变形，scale-down响应式兜底；兼容老Safari需加-webkit前缀。
图片在CSS中变形，通常是因为容器尺寸和图片原始宽高比不一致，又没做适配处理。用 object-fit 是最直接有效的解决方式，它能控制图片如何适应其容器，同时保持自身比例不拉伸、不变形。
object-fit 的常用值及效果
这个属性作用于 <img> 或带图片的 <video> 元素，需配合明确的宽高（如 width/height、max-width/max-height）才生效：
- object-fit: contain：完整显示整张图，按比例缩放，留白（类似“等比缩放居中”）
- object-fit: cover：填满容器，按比例裁剪（常用在封面图、头像等需要无空隙展示的场景）
- object-fit: fill：强行拉伸填满——会变形，一般避免使用
- object-fit: scale-down：取 contain 和 none 中更小的尺寸，适合响应式兜底
必须设置宽高，否则 object-fit 不起作用
很多同学加了 object-fit: cover 却没效果，大概率是因为图片没有设定宽高约束。浏览器默认按原始尺寸渲染，容器没限制，图片就不需要“适配”：
- 给
<img>加width: 100%; height: 200px;或aspect-ratio: 4/3; - 或用父容器设
width和height/aspect-ratio+overflow: hidden（配合 cover 更稳妥） - 响应式下推荐搭配
aspect-ratio使用，比如aspect-ratio: 16/9; width: 100%;
兼容性注意：老版 Safari 需加前缀
iOS 9.3–13.3 和 macOS Safari 9–13 对 object-fit 支持有限，部分版本需加 -webkit-object-fit：
立即学习“前端免费学习笔记（深入）”；
img {
width: 100%;
height: 200px;
-webkit-object-fit: cover;
object-fit: cover;
}
如需支持更老系统（如 iOS 8），可考虑用背景图替代：background-image + background-size: cover，但会失去 img 的语义化和 SEO 优势。
别忘了配 object-position 控制裁剪区域
当使用 cover 或 contain 时，图片可能被裁掉边缘。用 object-position 可手动调整“视窗”位置，类似背景图的 background-position：
-
object-position: center top;—— 顶部对齐，常用于人物照（避免切掉脸） -
object-position: 20% 30%;—— 水平20%、垂直30%处为锚点 - 默认是
center center，多数情况够用
不复杂但容易忽略：只要容器有明确尺寸约束，再合理选一个 object-fit 值，图片就能稳稳保持比例，不再糊成一团或拉得奇形怪状。
