图片变形的根本原因是未约束缩放比例，必须用max-width:100%+height:auto实现等比缩放，或固定容器尺寸后配合object-fit:cover/contain及object-position精准控制裁剪焦点。
图片变形不是代码写错了，而是你没告诉浏览器“按比例缩放”——直接设 width 和 height 两个固定值，等于强制拉伸，必然失真。
为什么只写 width: 100% 还是变形？
常见错觉：以为写了 width: 100% 就够了，结果在某些容器里图片还是被压扁。根本原因是没配 height: auto，浏览器默认会把 height 当作 auto，但一旦父容器高度塌陷（比如没设 min-height 或内容撑不开），img 实际渲染高度就不可靠。
- 必须显式写
height: auto，否则width: 100%在 flex/grid 容器或浮动布局中可能失效 - 如果父容器本身高度固定（如
height: 200px），height: auto就没意义——此时只能用object-fit或背景图方案 - 别信“写了
width就自动等比”，HTML 属性width="300"和 CSSwidth: 300px行为一致，都不保比例，除非另一个维度是auto
object-fit 不生效？先查这三件事
object-fit 不是开关，它依赖明确的尺寸上下文。90% 的失效都卡在这几个硬性条件上：
- 元素必须有确定的渲染尺寸：至少
width和height中一个非auto，且不能是0（检查 computed style 中的height是否为0） -
display必须是block或inline-block；img默认是inline，容易因换行符产生间隙，加display: block最稳妥 - IE11 及更早版本完全不支持
object-fit，降级方案只能用background-image+background-size: cover，但会丢失alt和 SEO
cover 裁掉人脸？用 object-position 微调
object-fit: cover 默认从图片中心裁剪，但人像、LOGO、文字图的关键区域往往不在正中。光靠 cover 不够，必须配 object-position 控制焦点：
立即学习“前端免费学习笔记（深入）”；
-
object-position: center top—— 保留头顶，适合头像、人像 -
object-position: bottom—— 保脚部，适合产品图、全身照 -
object-position: 20% 30%—— 百分比值对应图片坐标系，左上角是0% 0%，右下角是100% 100% - 注意：
object-position只在object-fit为cover或contain时起作用，fill和none下无效
响应式场景下，background-size 比 object-fit 更可控？
当图片纯作装饰、无需右键保存、也不需 srcset 响应式加载时，background-image 确实更稳，尤其在 Safari 旧版本或复杂嵌套布局中：
-
background-size: cover和background-size: contain行为稳定，不受display类型影响 - 必须配合
background-position，否则裁剪点不可控；移动端竖屏常需媒体查询重设，比如桌面用center，手机改用top -
background-attachment: fixed在 iOS Safari 上极易闪动或错位，慎用；若要视差效果，优先用transform: translateY()模拟 - 关键限制：无法设置
alt文本，搜索引擎无法识别图片内容，资讯类、电商详情页务必避开
真正难的不是选哪个属性，而是判断“这张图到底要不要完整显示”——证件照必须用 contain，Banner 图优先 cover，而用户头像还得加 object-position 防切脸。所有方案都绕不开一个前提：容器得有可预期的高度来源。
