响应式图片必须用max-width: 100%+height: auto，它确保小图不被拉伸、大图自动缩放且保持宽高比，是兼容ie9+、防cls、防溢出的底线方案。
直接用 width 和 height 属性最简单，但只适合已知尺寸、不需响应式的静态场景；真要兼顾清晰度、布局稳定和多端适配，必须用 CSS 的 max-width: 100% + height: auto ——这不是“可选技巧”，而是现代网页的底线写法。
只写 width 不写 height 是最安全的保比方案
浏览器会读取图片原始宽高比（来自 EXIF 或加载后解析），自动算出 height 值，实现等比缩放。这个行为原生支持所有现代浏览器和 IE9+，无需 JS 或额外样式。
-
width="400"有效，width="400px"是无效 HTML —— 属性值不能带单位 - 适用于 CMS 输出正文图、Markdown 渲染器生成的内嵌图等不可控源场景
- 风险点：若原图 EXIF 被裁剪工具误删或未更新，自动推算的
height可能失准 - 别让 CSS 冲突：一旦写了
img { height: 100% }，HTML 的自动推算就失效
max-width: 100% + height: auto 是响应式底线
这是目前兼容性最好（IE9+）、防溢出、保比例、且防 CLS（累积布局偏移）的组合。它确保图片在窄屏里不撑破容器，在宽屏里也不被无谓拉伸。
-
max-width: 100%是“上限”，小图不会被强行放大；width: 100%是“强制填满”，父容器若没设宽（比如display: inline），可能意外撑破布局 -
height: auto缺一不可——没有它，图片可能被截断、撑开容器，或因默认height: auto被覆盖而拉伸 - 必须加在内容区全局样式里，例如文章页、CMS 富文本输出区域：
article img { max-width: 100%; height: auto; }
固定容器内保持比例：优先用 aspect-ratio + object-fit
当图片必须塞进一个明确尺寸的卡片或网格项（比如 300×200 容器），且要避免高度塌陷或裁剪失控时，aspect-ratio 比 padding-trick 或 JS 更干净可靠。
- 示例：
.card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } -
aspect-ratio: 16 / 9让浏览器自动算出高度，不用依赖图片原始尺寸 -
object-fit: cover防止留白，contain则保留全图但可能有空隙 - 注意兼容性：Chrome 88+、Firefox 89+、Safari 15.4+ 支持；旧版需 fallback 到
padding-toptrick 或 JS
同时写死 width 和 height = 强制拉伸，不是控制
两个属性都写，浏览器完全忽略原始宽高比，强行缩放到指定像素。这不是“精确控制”，而是覆盖原始信息，容易引发问题。
- 典型错误：设计稿给的是 600×400 占位框，直接套用到一张 1200×800 的图上，加载前占位正确，加载后立刻撑大 → 触发 CLS
- 性能影响：浏览器对大图做实时缩放，低端设备可能卡顿
- SEO 风险：爬虫发现尺寸与实际图不符，可能降低图片相关性评分
- 仅适合图标、按钮内嵌小图等有强约束的场景，且建议提前用工具统一缩放原图再写属性
最容易被忽略的点是：哪怕用了 max-width: 100%，只要漏掉 height: auto，比例就保不住；而哪怕只写 width，只要父容器宽度不可控（比如浮动、inline 元素），图片仍可能溢出。保比例这件事，从来不是单点设置能解决的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
