响应式图片不变形的关键是先固定容器宽高比，再用object-fit（如cover、contain）控制填充方式，并配合object-position精调裁剪区域和srcset提供多分辨率源。
图片在响应式布局中变形，核心原因是容器尺寸随屏幕变化，而图片自身宽高比没被约束。用 object-fit 配合合理的尺寸设置，能精准控制图片如何适应容器，不拉伸、不裁切失当、也不留白过多。
明确容器尺寸是前提
如果图片父容器没有设定明确的宽高（比如只写 width: 100%，高度靠内容撑开），object-fit 就无从发力——它只能控制“图片怎么填进一个已知大小的框里”。
- 给容器设固定宽高比，例如用
aspect-ratio: 4 / 3（现代浏览器支持） - 或用 padding-bottom 百分比技巧兼容老浏览器：
height: 0; padding-bottom: 75%;（对应 4:3） - 再把图片设为
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
object-fit 的关键取值怎么选
object-fit 不是万能缩放开关，不同值解决不同问题：
- cover：图片等比缩放填满容器，超出部分裁剪——适合头图、卡片图，确保无留白且主体居中
- contain：图片等比缩放至完全可见，可能留白——适合产品图、图标，要求完整展示
- fill：强行拉伸填满（会变形）——一般避免使用
-
scale-down：在
none和contain中选更小的渲染方式——适合不确定原始尺寸的场景
配合 object-position 精调裁剪区域
用 cover 时，图片居中裁剪可能切掉重要部分（比如人脸偏上）。这时加 object-position 微调锚点：
立即学习“前端免费学习笔记（深入）”；
-
object-position: center top;—— 顶部对齐，保留上方内容 -
object-position: 20% 30%;—— 横向20%、纵向30%位置为裁剪中心 - 常和
object-fit: cover成对出现，尤其用于人物图或Banner图
别忘了图片源本身的适配
object-fit 解决的是“怎么显示”，不是“显示什么”。若小图被放大到高清屏，会模糊：
- 用
srcset提供多分辨率图片 - 例如：
- 确保高 DPR 屏幕也能加载足够清晰的资源，再由
object-fit控制呈现效果
不复杂但容易忽略。关键是先锁住容器比例，再用 object-fit 定义填充逻辑，最后靠 object-position 和多倍图收尾。三者配合，响应式图片就能稳住比例、守住重点。
