响应式图片必需写 img { max-width: 100%; height: auto; min-width: 0; display: block; }，并清除 html 中 width/height 属性、确保父容器有宽度约束、sizes 属性需匹配实际渲染宽度。
img { max-width: 100%; height: auto; } 是唯一必要写法
这行 CSS 就是响应式图片宽度自适应的起点，不是“之一”，而是不可省略的核心。它让图片在父容器变窄时自动等比缩小，且不会因 width 固定或 height 锁死而拉伸变形。
常见错误现象：图片在手机上溢出屏幕、被压扁、或下方出现空白间隙——往往就是漏了 height: auto，或者写了 width: 100% 强制拉伸。
-
max-width: 100%：只设上限，不强制撑满；原始图小就保持原尺寸，大才缩 -
height: auto：必须配对使用，否则浏览器按 HTML 内联 height 或默认行高渲染，宽高比崩坏 - 别写
width: 100%：会把小图强行放大，模糊且失真 - 建议加
display: block：消除图片作为 inline 元素自带的基线留白
必须清除 img 标签里的 width 和 height 属性
哪怕 CSS 写得再对，只要 HTML 中还留着 width="600" height="400"，height: auto 就会被覆盖。浏览器优先级：HTML 属性 > CSS。
使用场景包括 CMS 输出、旧模板迁移、第三方组件注入——这些地方最容易偷偷塞进内联尺寸。
- 手动删掉标签里的
width和height属性（最稳妥） - 用 JS 清除：
document.querySelectorAll('img').forEach(img => { img.removeAttribute('width'); img.removeAttribute('height'); }); - 如果无法改 HTML，可用 CSS 覆盖：
img[width], img[height] { width: auto !important; height: auto !important; }，但属权宜之计
父容器没宽度，max-width: 100% 就失效
max-width: 100% 的“100%”是相对于父容器计算的。如果父级是 float、position: absolute、或未设 width/max-width 的 flex item，那它的宽度可能是 fit-content，导致图片按原始尺寸渲染甚至溢出。
尤其在 Flex 布局中，img 默认有 min-width: auto，会抗拒收缩——这点极易被忽略。
- 确保父容器有明确宽度约束，例如：
width: 100%、max-width: 750px、或flex-basis: 100% - Flex 容器中的图片，补一句：
min-width: 0，否则小屏下不缩 - 完整推荐写法：
img { max-width: 100%; height: auto; min-width: 0; display: block; }
sizes 属性写错，srcset 就白配
如果你用了 srcset 却发现小屏还在加载 2MB 的 1200w 图，大概率是 sizes 没写准。浏览器只信 sizes 声明的宽度，完全不看实际 CSS 渲染结果。
比如图片真实渲染宽度是 calc(100vw - 32px)（左右各 16px 边距），但 sizes 还写 "100vw"，浏览器就会按视口全宽选图。
- 查真实宽度：打开 DevTools → Elements → 选中
img→ Computed 面板看width值 - 断点下记下数值，换算成 vw 或 px 填进
sizes，例如：sizes="(max-width: 480px) calc(100vw - 32px), 800px" - 别漏兜底值，旧版 Safari 要求显式 fallback：
sizes="(max-width: 480px) 100vw, 800px"
真正难的不是写对那两行 CSS，而是确认父容器有没有宽度、HTML 有没有埋内联尺寸、sizes 有没有对齐真实渲染宽度——这三个地方一错，其余都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
