真正靠谱的响应式方案是max-width: 100% + height: auto，可防溢出、保比例、不拉伸、兼容IE9+；仅设width属性虽能按原始宽高比推算height，但width: 100%会强制拉伸小图，而max-width: 100%仅在图片超宽时缩放。
直接用 width 和 height 属性最简单，但容易失真；真正靠谱的响应式方案是 CSS 的 max-width: 100% + height: auto —— 这不是“推荐写法”，而是目前唯一能同时防溢出、保比例、不拉伸、兼容 IE9+ 的底线组合。
只写 width 属性时，height 怎么算？
浏览器会按图片原始宽高比自动推算 height 值。比如原图是 800×600（4:3），你写 width="400"，它就自动设 height="300"。这个行为所有现代浏览器和 IE9+ 都一致，无需 JS 或额外样式。
- 仅设
width是安全的保比例方式，尤其当 CMS 后台图源宽高比不确定时 -
width="400px"是无效写法 —— HTML 属性值不带单位，必须写成width="400" - 如果父容器本身是弹性宽度（如
max-width: 800px的<div>），单独width也会随之缩放
max-width: 100% 和 width: 100% 效果差在哪？
width: 100% 强制填满父容器，哪怕原图只有 200×150，也会被拉伸；max-width: 100% 是上限约束，小图保持原尺寸，大图才缩放 —— 更符合响应式预期。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 某些老版 iOS WebView 对
width: 100%渲染不稳定，但对max-width: 100%支持良好 - 如果父容器没设明确宽度（比如
display: inline），width: 100%可能撑破布局；max-width: 100%不会 - 漏掉
height: auto，max-width: 100%就只剩一半效果：宽缩了，高卡死在原始值，必然失真
Flex/Grid 容器里图片不收缩？问题不在 <img>
写了 max-width: 100% + height: auto 却仍溢出，大概率是 Flex/Grid 的默认行为锁死了收缩能力 —— 子项默认 min-width: auto，阻止图片压缩到小于其固有尺寸。
立即学习“前端免费学习笔记（深入）”；
- 解决方法不是给
<img>加flex-shrink: 0（那会让它更难缩） - 而是给它的**父容器**加
min-width: 0，例如：<div style="display: flex; min-width: 0"><img></div> - Grid 同理：若列轨道用了
minmax(300px, 1fr)，图片就卡死在 300px 宽，得调轨道定义或父容器min-width
最易被忽略的是：无论用 HTML 属性还是 CSS，只要两个维度都硬写且比例不对，就一定失真；而 height: auto 在 CSS 中不是可选项，是保比例的必要条件 —— 少它一个字，图片就可能塌陷或拉伸。
