90%响应式图片问题源于盒模型理解偏差：需同时设置img{max-width:100%;height:auto;}，父容器必须box-sizing:border-box，并合理处理padding/margin位置，配合srcset与sizes实现完整响应式。
响应式图片溢出、拉伸或错位，90% 是盒模型没理清，不是图片本身的问题。
为什么 max-width: 100% 单独写会失效
很多人写了 img { max-width: 100%; } 就以为完事了，结果小图被强行拉大、大图在窄屏上仍撑破容器。根本原因在于：浏览器默认用 content-box 计算父容器尺寸，而 max-width: 100% 是相对于父容器的 content width 算的——如果父容器有 padding 或 border，实际可容纳空间就更小了。
必须配对使用 height: auto，否则高度不会随宽度等比缩放，导致变形。也不要用 width: 100% 替代，它会无条件拉伸小图，模糊失真。
-
max-width: 100%表示“最多占满内容区，绝不超出”，小图保持原尺寸 -
height: auto是强制配套项，缺一不可 - 父容器若设了
padding: 16px和border: 2px，且未改box-sizing，那max-width: 100%实际可用宽度只有container-width − 36px
父容器的 box-sizing: border-box 不是可选项
不设 box-sizing: border-box，max-width: 100% 就像没系安全带——表面看着稳，一撞就飞。尤其当父容器是卡片、图文列表这类带内边距或边框的结构时，问题立刻暴露。
立即学习“前端免费学习笔记（深入）”；
全局重置最稳妥：* { box-sizing: border-box; } 不够，必须带上伪元素：*::before, *::after，否则用 ::before 做装饰边框的组件（比如带角标的图片容器）依然按老规则计算，尺寸失控。
- 只给图片父容器加
box-sizing: border-box也能救急，但不如全局统一 - 别在媒体查询里动态切
box-sizing，它是基础计算规则，不是响应式开关 - 个别第三方组件（如某些富文本编辑器内的
textarea）需要content-box，可显式覆盖：.legacy-input { box-sizing: content-box; }
padding 和 margin 放错位置，图片就“飘”了
常见错误：在图片直接父容器上设 padding，再让 img 宽度为 100%，结果图片被挤出容器。因为 padding 占的是内容区空间，而 img 的 max-width: 100% 是按内容区算的，没预留 padding 位置。
正确做法是把 padding 上移到更外层容器，或者用 margin 控制图片与父容器边缘的距离。但要注意：垂直方向的 margin 在块级流中可能合并，导致间距消失；gap 更可靠，尤其配合 display: flex 或 grid 布局图片组时。
- 图片自身不用
margin控制内外间距，容易触发外边距合并 - 卡片类容器的内边距用
padding，卡片之间的间距用margin或gap - 想让图片紧贴父容器内边框？确认父容器是
border-box，且没额外padding
srcset 和 sizes 不配 max-width，就是半套响应式
max-width: 100% 只解决“怎么缩”，不解决“缩哪个图”。没有 srcset，高清屏上仍是小图拉伸，模糊；小屏加载大图，浪费带宽。
关键在 sizes 值要和 CSS 中图片的最终渲染宽度一致。比如图片在桌面端占 800px 宽，移动端占 100vw，那 sizes 就得写成 sizes="(max-width: 768px) 100vw, 800px"。浏览器据此选图，max-width 负责缩放，二者缺一不可。
-
srcset提供多张图源，sizes告诉浏览器“这张图在不同断点下大概多宽” - 别写死
sizes="100vw"—— 如果图片实际只占容器一半，浏览器会错选过大图源 - 调试时看 Network 面板的
Size列，确认加载的是预期尺寸的图
真正卡住人的，往往不是 max-width 本身，而是它和父容器盒模型、内边距、边框、甚至伪元素之间的隐性耦合。调一张图，本质是在调整个局部布局链的尺寸契约。
