必须用带属性的css选择器（如[alt]、img[alt]）加!important，或前端正则预处理html为img标签注入style="max-width:100%;height:auto;"，因小程序rich-text不支持普通img选择器且忽略外部样式。
微信小程序 rich-text 里图片不听 max-width: 100% 怎么办
它根本就收不到这个样式——rich-text 在微信小程序中不解析外部 CSS，也不认 class，只认 <img> 标签内联的 style 属性。你写在 .scss 里的 img { max-width: 100% } 全部被忽略。
实操建议：
- 后端返回的 HTML 字符串中，对每个
<img>标签手动注入style="max-width:90%" - uni-app 项目可在前端用正则处理：匹配
<img>]*>，再用replace()插入内联样式（注意保留原有src和alt） - 别依赖
width或height属性传值——微信小程序会重算并覆盖它们，只信任style中的声明
为什么加了 max-width: 100% 还是溢出？查父容器的 computed width
不是样式没写，而是参照系错了。max-width: 100% 的“100%”是按父容器的 width 计算的，而 rich-text 的父级常是 flex 容器或未设宽的 view，computed width 显示为 auto 或远大于视口（比如 1200px），结果 100% 就成了 1200px。
实操建议：
- 用真机调试工具（微信开发者工具 → 调试器 → Elements → 选中图片父级 → Computed）看它的
width值 - 如果显示
auto或异常大，就在父级<view></view>上加style="width: 100%;" - 更稳妥的做法：直接锚定视口，给图片加
style="max-width: 100vw; height: auto;"（注意：iOS Safari 下需防滚动条宽度，可用100dvw或补padding-right: 16px）
object-fit: cover 单独写无效？缺这三样
object-fit 不是开关，它是盒模型内的裁剪指令。没有明确尺寸盒子，它连“裁哪”都不知道。
必须同时满足：
- 图片容器（比如外层
<view class="img-wrapper"></view>）有显式宽高，例如style="width: 100%; height: 200px;"或style="width: 100vw; height: 50vh;" - 图片自身设
style="width: 100%; height: 100%; object-fit: cover;" - 容器加
style="overflow: hidden;"——否则 Safari 和部分安卓 WebView 会漏出裁剪边缘
别同时写 width: 100% 和 max-width: 100%，Safari 旧版本会触发尺寸抖动。
uni-app 多端兼容时怎么写才不翻车
H5 和 App 端能用 class、伪元素、外部样式，但微信小程序只吃内联 style，且对 flex-shrink、gap 等属性支持弱。一套代码三端跑，最容易在图片宽度上暴露平台差异。
推荐做法：
- 用
v-if+uni.getSystemInfoSync().platform === 'mp-weixin'做平台判断，微信小程序分支单独处理图片样式字符串 - 避免用
flex直接包rich-text——微信小程序里rich-text内部子项不受父 flex 控制，容易塌陷或溢出 - 图片高度塌陷常见于未设
height: auto，或用了loading="lazy"（小程序不支持该属性，会直接忽略，导致 img 高度为 0）
最易被忽略的一点：微信小程序 rich-text 对 base64 图片有默认宽高限制逻辑，哪怕你写了 style，它也可能在渲染中途强行截断。真机测试时务必用实际图片 URL，别只靠 base64 模拟。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
