img { max-width: 100% } 在 rich-text 中无效，因其不支持标签选择器，仅认 class 或内联 style；生效方案为 img[src] { max-width: 100% !important; height: auto !important; } 或后端注入内联样式。
直接给 img 写 max-width: 100% 在富文本里基本无效，尤其是小程序或部分 H5 渲染器——它压根不认你写的全局 img 选择器。
为什么 img { max-width: 100% } 在 rich-text 里不生效
富文本组件（如微信/支付宝小程序的 rich-text、uni-app 的 <rich-text></rich-text>）不是标准 DOM 渲染流程，而是将 HTML 字符串解析为受限节点树。官方明确只支持通过 class 或内联 style 控制样式，img、div img 这类标签选择器或后代选择器全部被忽略。
常见现象包括：
- iOS 真机上图片横向溢出、触发页面滚动条
- Android 上文字被浮动图片顶到下方空白处
- DevTools 里能看到
<img>根本没 class，也没父级上下文可绑定
真正能生效的三种写法（小程序 & uni-app 实测）
必须绕过“标签选择器失效”这个限制，用属性选择器 + 强制覆盖：
-
img[alt] { max-width: 100% !important; height: auto !important; }—— 要求后端输出的<img>带alt属性（哪怕为空alt=""） -
img[src] { max-width: 100% !important; }—— 更通用，但需确保所有图片都有src（基本都满足） - 无属性可用时，前端 JS 预处理：用正则给每个
<img> 补上 <code> style="max-width:90%"，再传给rich-text
注意：!important 不是可选项，是必需项；scoped style 也无效，必须写在全局样式或页面级 <style></style> 中。
max-width: 100% 为什么还要配 height: auto
只设 max-width 不够，因为 <img> 默认是 inline 元素，max-width 对 inline 元素本身不直接起作用——它实际生效的前提是浏览器把它当作“有尺寸约束的替换元素”来处理，而 height: auto 是触发该行为的关键信号。
- 缺
height: auto时，部分安卓 WebView 会保持原始高度，导致宽高比错乱、留白或裁剪 - 不要写
height: 100%或固定值，那会强制拉伸变形 - 若需进一步防撑破，可加
display: block消除 inline 元素默认的基线对齐间隙
后端注入 style 是最稳的兜底方案
前端样式容易被平台限制或覆盖，而富文本内容本质是字符串。与其在 CSS 层反复试探，不如让后端在生成 HTML 时就给每张图加上内联样式：
@@##@@
这样既绕过所有选择器限制，又不依赖前端运行时环境。如果后端无法配合，JS 正则替换也比 CSS hack 可靠得多——毕竟，rich-text 最终渲染的是字符串，不是 DOM。
真正难的不是写对那行 max-width，而是搞清它在哪一层被谁过滤掉了：是平台规则？是属性缺失？还是 display 类型没调对？先定位失效环节，再选对应解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
