微信端需清除图片内联宽高并设max-width:100%、height:auto；小程序image组件须用mode属性配合显式容器宽高，禁用内联width/height及style宽度。
微信端（包括微信内置浏览器和小程序）不认 max-width: 100% 的常规响应式写法，直接套用 PC 端方案大概率失效——尤其是富文本、rich-text 或动态插入的图片。核心矛盾在于：微信环境对 CSS 的解析更保守，且图片常带内联宽高或固定尺寸样式。
微信内置浏览器中 img 标签必须清除内联 width/height
微信浏览器（X5 内核）会优先采用 <img width="800" height="400"> 这类行内属性，导致 height: auto 完全被忽略，图片高度卡死、拉伸变形。
- 手动移除 HTML 中所有
width和height属性（服务端渲染或 CMS 输出需过滤） - 若无法修改源 HTML，可用 JS 在加载后清理：
document.querySelectorAll('img').forEach(i => { i.removeAttribute('width'); i.removeAttribute('height'); }); - 务必配合
img { max-width: 100%; height: auto; display: block; }，缺一不可 - 注意：部分 CMS 导出的图片还带
style="width: 800px;"，需用 CSS 覆盖：img[style] { width: auto !important; }
小程序中 image 组件必须用 mode + 显式容器约束
小程序的 <image> 不是原生 <img>，它不响应 max-width，必须靠 mode 属性驱动适配逻辑，且父容器必须有明确宽高。
- 宽度 100% 高度自适应 → 用
mode="widthFix"，并确保父<view>有width: 100%（不能是flex下未设min-width: 0的情况） - 固定容器内填满不畸变 → 用
mode="aspectFill"或mode="aspectFit"，同时给父容器设显式width和height（如height: 200rpx） - 避免在
<image>上写style="width: 100%"，这会与mode冲突；所有尺寸控制交给mode和父容器 - 旧版基础库（mode="widthFix" 在 flex 容器中支持不稳定，加
min-width: 0到父 view 更稳妥
富文本场景（rich-text / mp-html）要拦截并重写 style
微信小程序 <rich-text> 不解析外部 CSS，且会保留来源 HTML 的内联样式；mp-html 插件虽强，但默认不会自动清理危险或冲突的 style。
立即学习“前端免费学习笔记（深入）”；
- 对富文本内容做预处理：正则匹配并删除
width:、height:、float:等微信不支持的声明 - mp-html 配置中启用
img-mode="widthFix"，并传入tag-style强制重置图片样式：{ img: 'max-width: 100%; height: auto; display: block;' } - 若图片路径为相对路径（如
/uploads/a.jpg），需在base-url中补全域名，否则 iOS 真机加载失败 - 慎用
display: inline-block—— rich-text 中图片默认 inline，加该样式可能引发底部空白，改用vertical-align: top更安全
真正容易被忽略的是：微信端的“响应式”不是只调尺寸，而是从 HTML 结构、内联属性、框架限制、网络路径四层同时动手。任何一层漏掉，比如忘了删 height="400"，或没给 <image> 的父 view 设 width，都会让整个适配链路断在第一步。
