最可靠方案是max-width: 100%; height: auto;，但需父容器有可计算宽度且无flex/float/line-height干扰；width: 100%强制撑满导致高度失真，object-fit仅适用于固定尺寸容器内控制缩放。
直接用 max-width: 100% + height: auto 就能解决绝大多数拉伸问题——但必须确认父容器有可计算宽度，且没被 flex、float 或隐式 line-height 干扰高度推算。
为什么只写 width: 100% 一定会拉伸
它强制图片撑满父容器宽度，却对高度不做任何比例联动。浏览器不会自动重算高度，结果就是：原始图是 4:3，你设 width: 100% 后宽度变 800px，高度却还卡在默认值（比如 200px），活生生压成 4:1。
-
width: 100%是“必须占满”，max-width: 100%是“最多占满”，小图保持原尺寸不放大 - 漏写
height: auto是高频错误：哪怕写了max-width: 100%，没配height: auto，浏览器可能继承父级height、line-height，甚至被flex的align-items: stretch拉高 - 在
display: flex容器里，还需额外加min-height: 0才能让height: auto生效（Safari 尤其敏感）
object-fit 不是响应式缩放方案，而是“填盒子”工具
它只在容器尺寸固定时起作用，比如卡片封面、头像、轮播图项。单独写 object-fit: cover 没效果，因为 img 自身没宽高，盒子是空的。
- 必须先让父容器有明确尺寸：
width: 300px; height: 200px;或用aspect-ratio: 4 / 3 - 图片样式要写全：
width: 100%; height: 100%; object-fit: cover; object-position: center;—— 缺object-position: center，人像容易切头 -
object-fit: fill就是你要避免的拉伸行为，别用 - IE 不支持？改用
background-image+background-size: cover，但会丢失alt和语义化
父容器没宽度时 max-width: 100% 失效怎么办
常见于 position: absolute、float、flex 子项未约束尺寸，或外层 div 宽度未定义。“100%”没参照物，自然不缩放。
- 用 DevTools 查
computed width，确认父容器是否真有值（不是auto或0px） -
flex布局中，检查是否误设了flex-shrink: 0，导致图片拒绝缩小 -
grid布局里，图片外层容器建议加aspect-ratio: 4 / 3，防止加载前高度塌陷 - 旧版 Safari（≤15.2）需 fallback：
padding-bottom: 75%（对应 4:3）+position: relative父容器 +position: absolute图片
最容易被忽略的是图片加载前的布局抖动：浏览器对未加载图片的 intrinsic size 推算不准，height: auto 可能暂时失效。加 aspect-ratio 或用 srcset 配合 sizes 提前告知尺寸，比 JS 占位更轻量也更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
