最可靠方案是max-width: 100% + height: auto，它确保图片等比缩放、不溢出、不失真，兼容ie9+；单独width: 100%会拉伸变形，仅设max-width不配height: auto则高度塌陷。
只设 width 属性（纯 HTML 方式）
浏览器在 <img> 标签中只提供 width（如 width="600"）且不写 height 时，会严格依据图片原始像素宽高比自动计算高度。这是最轻量、兼容性最好的方案，IE9+ 和所有现代浏览器都支持。
- 必须用纯数字值，如 width="400"（单位为 px），不能写 width="400px" 或 width="80%"（百分比虽可用，但部分旧版邮件客户端可能不解析）
- 禁止同时设置 width 和 height，否则必然拉伸变形
- 该方式对 CLS（布局偏移）友好：浏览器能提前预留正确高度，避免页面跳动
- 缺点是无法响应式——容器变窄时，图片仍保持固定宽度，可能溢出或触发横向滚动条
max-width: 100% + height: auto（最稳 CSS 方案）
这是当前绝大多数场景下唯一推荐的通用解法。它不依赖图片原始尺寸是否已知，也不要求父容器有固定宽高，能安全应对 flex、grid、流式布局等各种上下文。
- max-width: 100% 限制图片宽度不超过父容器，height: auto 强制浏览器按原始比例重算高度
- 错误示范：width: 100% 单独使用 → 高度卡死在原始值，必然横向拉伸
- 若父容器是 flex 项，默认 min-width: auto 可能阻止收缩，需额外加 min-width: 0
- 记得加 display: block，否则 <img> 作为行内元素底部会留 3–4px 空白
aspect-ratio 搭配 object-fit（现代浏览器首选）
当你需要「容器维持固定比例 + 图片填满且不失真」，比如封面图、卡片头图，aspect-ratio 是目前语义最清晰、代码最干净的方案。
- 写法示例：style="width: 100%; aspect-ratio: 16 / 9; height: 100%; object-fit: cover;"
- aspect-ratio 定义的是容器自身比例，与图片原始尺寸无关；object-fit 才决定图片如何适配这个框
- Safari ≤15.2 不支持 aspect-ratio，需降级：用 padding-bottom: 56.25%（16:9）+ position: absolute
- object-fit: cover 会裁剪，object-fit: contain 会留白；两者都必须配合显式宽高才生效
图片原始宽高比丢失时怎么办
即使你写了 max-width: 100% 和 height: auto，图片仍变形，大概率不是代码问题，而是图片文件本身损坏了 intrinsic 尺寸信息。
- 常见来源：CMS 导出图、微信下载图、某些无损压缩工具（如 tinypng 的早期版本）会抹除 EXIF 或 IDAT 中的宽高元数据
- 验证方法：用浏览器开发者工具检查 Network 面板里该图片的响应头或原始尺寸，或直接用 file 命令（Linux/macOS）查看二进制头信息
- 临时修复：手动补上 width 和 height 属性（仅当原始尺寸可查），但注意这会破坏响应式行为
- 长期建议：构建阶段用脚本扫描并修复图片元数据，或统一走服务端生成带尺寸的缩略图
max-width: 100% + height: auto（最稳 CSS 方案）
这是当前绝大多数场景下唯一推荐的通用解法。它不依赖图片原始尺寸是否已知，也不要求父容器有固定宽高，能安全应对 flex、grid、流式布局等各种上下文。
- max-width: 100% 限制图片宽度不超过父容器，height: auto 强制浏览器按原始比例重算高度
- 错误示范：width: 100% 单独使用 → 高度卡死在原始值，必然横向拉伸
- 若父容器是 flex 项，默认 min-width: auto 可能阻止收缩，需额外加 min-width: 0
- 记得加 display: block，否则 <img> 作为行内元素底部会留 3–4px 空白
aspect-ratio 搭配 object-fit（现代浏览器首选）
当你需要「容器维持固定比例 + 图片填满且不失真」，比如封面图、卡片头图，aspect-ratio 是目前语义最清晰、代码最干净的方案。
- 写法示例：style="width: 100%; aspect-ratio: 16 / 9; height: 100%; object-fit: cover;"
- aspect-ratio 定义的是容器自身比例，与图片原始尺寸无关；object-fit 才决定图片如何适配这个框
- Safari ≤15.2 不支持 aspect-ratio，需降级：用 padding-bottom: 56.25%（16:9）+ position: absolute
- object-fit: cover 会裁剪，object-fit: contain 会留白；两者都必须配合显式宽高才生效
图片原始宽高比丢失时怎么办
即使你写了 max-width: 100% 和 height: auto，图片仍变形，大概率不是代码问题，而是图片文件本身损坏了 intrinsic 尺寸信息。
- 常见来源：CMS 导出图、微信下载图、某些无损压缩工具（如 tinypng 的早期版本）会抹除 EXIF 或 IDAT 中的宽高元数据
- 验证方法：用浏览器开发者工具检查 Network 面板里该图片的响应头或原始尺寸，或直接用 file 命令（Linux/macOS）查看二进制头信息
- 临时修复：手动补上 width 和 height 属性（仅当原始尺寸可查），但注意这会破坏响应式行为
- 长期建议：构建阶段用脚本扫描并修复图片元数据，或统一走服务端生成带尺寸的缩略图
max-width: 100% 和 height: auto，图片仍变形，大概率不是代码问题，而是图片文件本身损坏了 intrinsic 尺寸信息。
- 常见来源：CMS 导出图、微信下载图、某些无损压缩工具（如 tinypng 的早期版本）会抹除 EXIF 或 IDAT 中的宽高元数据
- 验证方法：用浏览器开发者工具检查 Network 面板里该图片的响应头或原始尺寸，或直接用 file 命令（Linux/macOS）查看二进制头信息
- 临时修复：手动补上 width 和 height 属性（仅当原始尺寸可查），但注意这会破坏响应式行为
- 长期建议：构建阶段用脚本扫描并修复图片元数据，或统一走服务端生成带尺寸的缩略图
真正容易被忽略的点是：所有比例控制方案，最终都依赖图片有有效的 intrinsic 尺寸。没有这个基础，height: auto 就成了无源之水，aspect-ratio 也失去参照。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
