图片撑破容器的直接原因是小程序 rich-text 组件忽略 img 内联样式并优先按固定尺寸渲染；需预处理 html：移除 width/height、清除 style、注入 max-width:100%;height:auto;display:block。
rich-text里图片撑破容器的直接原因
不是CSS没写对，而是小程序 rich-text 组件会主动忽略 img 标签上大部分内联样式（比如 width:100%），尤其当原始 HTML 中存在 width="800" 或 style="width:800px" 时，它优先按固定尺寸渲染，导致横向溢出或截断。iOS 微信小程序还会强制等比缩放并裁切，Android 端则偶发空白——这本质是渲染引擎对 DOM 节点的硬编码干预，不是样式层能靠 !important 打破的。
用正则预处理 HTML 字符串最稳妥
服务端不改？那就前端在传给 :nodes 前做清洗。关键动作只有三步：
- 移除所有
width、height属性（含双引号/单引号/无引号写法） - 清除已有
style属性（避免max-width被旧width覆盖） - 统一注入
style="max-width:100%;height:auto;display:block;"
示例函数（可直接复用）：
formatRichText(html) {
if (!html) return html
let newContent = html
.replace(/<img>]*>/gi, match => {
return match
.replace(/width\s*=\s*["']?[^"']*["']?/gi, '')
.replace(/height\s*=\s*["']?[^"']*["']?/gi, '')
.replace(/style\s*=\s*["']?[^"']*["']?/gi, '')
})
.replace(/<img style="max-width:90%" return newcontent><h3>mp-html 插件比原生 rich-text 更可控</h3>
<p>如果你已在用或能引入第三方方案，<code>mp-html</code> 是目前适配最稳的选择。它不依赖小程序原生 <code>rich-text</code>，而是用自定义组件逐节点解析，对 <code>img</code> 的宽高控制完全开放：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/gongju/2488" title="uni-app"><img
src="https://img.php.cn/upload/manual/001/431/639/6a6029e0c4cd4231.png" alt="uni-app" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/gongju/2488" title="uni-app" class="overflowclass">uni-app</a>
<p class="overflowclass">uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。</p>
</div>
<a rel="nofollow" href="/xiazai/gongju/2488" title="uni-app" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
- 支持通过
config配置全局图片样式，如img: { style: 'width:100%;height:auto' } - 可监听
onImageLoad动态计算原始尺寸，再决定是否缩放 - 自动处理相对路径、base64、跨域图片加载失败 fallback
注意：需在 mp-html 的 nodes 模式下使用，不要混用原生 rich-text；H5 端仍走标准 DOM 渲染，无需额外适配。
customElements.define('uni-rich-img') 是终极解法但成本高
如果项目已规模化、且要长期支撑多端（含未来 PWA/桌面端），建议走自定义元素路线：
- 用
customElements.define('uni-rich-img', ...)注册一个包裹img的 shadow DOM 组件 - 在 shadow 内完全控制样式、加载逻辑、长按事件（原生
rich-text不触发onlongpress） - 保留原始
src到data-original，便于后续懒加载或高清图切换
这个方案绕开了 rich-text 的沙箱限制，但需重构富文本解析流程，且微信小程序基础库需 ≥2.25.0 才完整支持 customElements。
真正容易被忽略的点是：正则替换必须覆盖所有引号变体（width=800、width="800"、width='800'），漏一种就可能让某张图失效；另外 max-width:100% 必须搭配 display:block，否则 inline 元素的 margin 和垂直对齐会引发错位。
