根本原因是缺少响应式约束；必须用 max-width: 100% + height: auto 实现等比缩放，配合 srcset/sizes 提升高清显示，并排查祖先元素干扰。
图片在手机上溢出、被裁剪、模糊或留白严重——根本原因不是图片本身，而是缺少响应式约束。直接给 <img> 加 width: 100% 不够，必须配合 max-width 和 height: auto，否则会拉伸变形或撑破容器。
用 max-width: 100% + height: auto 强制等比缩放
这是最基础也最容易漏掉的关键组合。只设 width: 100% 会让图片强行填满父容器宽度，但高度不随动，导致畸变；只设 height: auto 而不控宽，图片可能原尺寸渲染，超出屏幕。
实操建议：
- 给
<img>直接加内联样式：style="max-width:90%" - 或统一写 CSS 类：
.resp-img { max-width: 100%; height: auto; }，再在 HTML 中写<img src="x.jpg" class="resp-img"> - 不要给图片设固定
width或height属性（如width="600"），HTML 属性会覆盖 CSS 的max-width
避免父容器限制失效：检查 <div>
<p>即使图片本身写了 <code>max-width: 100%，如果它嵌套在没设宽度限制的 <div> 里，而这个 <code><div> 又被设了 <code>white-space: nowrap 或 display: inline-block，图片仍可能溢出。
常见错误现象：
- 图片右侧出现横向滚动条
- 页面整体被“撑宽”，无法正常左右滑动
- 开发者工具里看到图片宽度 > 100vw
解决办法：
- 确保根容器（如
、<main></main>）没有意外的min-width或width - 给直接包裹图片的父元素加
overflow-x: hidden（临时兜底，但应优先查清根源） - 用 Chrome DevTools 的「Layout Shift Regions」功能快速定位溢出源头
需要高清显示？加上 srcset 和 sizes
单纯缩放会放大低分辨率图，手机上看模糊。不换图、不改框架的前提下，用原生 srcset 是成本最低的清晰度提升方式。
使用场景：
- 同一张图有多个尺寸版本（如
pic-400w.jpg、pic-800w.jpg、pic-1200w.jpg） - 目标设备像素比（dpr）≥ 2（绝大多数 iPhone 和安卓旗舰机）
示例代码：
@@##@@
注意点：
-
sizes值必须匹配你实际布局中的图片宽度占比，写错会导致浏览器选错图 - 没配
sizes时，浏览器默认按 100vw 选图，容易加载过大资源 - 开发阶段可用
chrome://flags/#enable-experimental-web-platform-features开启「Device Scale Factor」模拟高 DPR
真正卡住人的往往不是语法，而是 max-width 被某个祖先元素的 display: flex 或 float 暗中干扰，或者 srcset 里漏写了 w 单位。调的时候先关掉所有 JS，纯 HTML+CSS 复现问题，反而最快。
