最稳方案是max-width: 100% + height: auto，确保父容器有可计算宽度并设display: block；固定容器推荐aspect-ratio配合object-fit: cover/contain；禁用所有硬编码宽高及background-size: 100% 100%等破坏比例的写法。
避免过大的图片直接拉伸展示，核心是守住原始宽高比，并让浏览器按比例缩放，而不是强制撑满或硬设尺寸。关键不在“压小”，而在“不破坏比例”。
用 max-width: 100% + height: auto 最稳
这是兼容性最好、出错率最低的基础方案：
- max-width: 100% 表示“最多占满父容器宽度”，小图保持原尺寸不放大
- height: auto 告诉浏览器：高度必须随宽度等比缩放，不能卡死
- 必须确保父容器有可计算的宽度（不是 auto 或 0），否则 100% 没参照物
- 给 img 加 display: block，避免 inline 元素的 baseline 间隙干扰布局
固定容器内用 aspect-ratio + object-fit
适合卡片、封面、头像等需要统一尺寸的场景：
- 外层容器设 aspect-ratio: 16 / 9（或其他真实比例），防止加载前塌陷
- img 写 width: 100%; height: 100%，再配 object-fit: cover（填满裁剪）或 contain（完整显示）
- 旧版 Safari（≤15.2）需降级：用 padding-bottom: 56.25%（对应 16:9）+ position: absolute 图片
- 别漏写 object-position: center，否则人像可能切掉头顶
禁用所有硬编码宽高的写法
这些做法会直接覆盖 intrinsic aspect ratio，导致拉伸：
- width: 100%; height: 200px —— 高度锁死，必变形
- width: 300px; height: 200px —— 完全无视原图比例
- background-size: 100% 100% —— 强制拉伸背景图，应改用 cover 或 contain
- HTML 中写
<img width="300" height="200">—— 同样强制尺寸，语义和响应式都受损
注意布局上下文干扰
即使写了正确样式，也可能被父容器“悄悄破坏”：
- 在 flex 容器中，加 min-height: 0 才能让
height: auto生效（Safari 尤其敏感） - 父容器若设了 padding 或 border，且
box-sizing: border-box，要确认max-width: 100%是基于 content 区域计算的 - 用 DevTools 查看 computed width，确认父容器宽度不是 0px 或 auto —— 这是很多“样式写了却没用”的根源
