width: 100%会强制拉伸小图致变形，应改用max-width: 100%配合height: auto；uni-app富文本需预处理HTML，清除原有宽高和style后注入安全样式。
为什么width: 100%会让小图被拉伸变形
直接给 img 写 width: 100% 是最常见也最容易出错的做法。它会强制图片宽度填满父容器，不管原始尺寸多小——结果就是模糊、失真、比例崩坏。
真正该用的是 max-width: 100%：它只在图片原宽 > 父容器时才缩放，原图小就保持原样，不干预。
-
max-width: 100%+height: auto是黄金组合，必须同时出现 - 漏掉
height: auto，高度会塌成一条线（尤其在 Flex 或 Grid 容器里） - 父容器若没设置
width或被浮动/绝对定位撑开，max-width: 100%就失去计算基准，可能缩到看不见
uni-app 小程序端富文本中图片不带 style 怎么办
小程序渲染富文本时，rich-text 组件不支持内联 style，也不执行 JS，所以不能靠 CSS 类或运行时加样式。必须在 HTML 字符串进组件前做预处理。
- 用正则清除干扰属性：
html.replace(/(width|height)=["'][^"']*["']/gi, '') - 去掉原有
style：.replace(/style=["'][^"']*["']/gi, '') - 统一注入安全样式：
.replace(/ - 注意别用
width: 100%，否则后端传的小图（如图标）会被强行拉伸
父容器没设宽高，max-width: 100% 为啥失效
这不是 CSS bug，是计算逻辑问题。max-width: 100% 的 “100%” 是相对于父容器的 width 值。如果父容器是 div 且没设宽、内部又全是浮动/绝对定位内容，它的计算宽度可能是 0 或 fit-content，导致图片缩到不可见。
- 检查父容器是否被
display: flex/grid包裹但没设width—— 加width: 100%或min-width: 0可修复 - 富文本常放在
rich-text或v-html容器里，这些容器默认display: inline，需显式设为block或inline-block并给宽 - 小程序里
rich-text的父view必须有明确宽度（比如width: 100%），否则子img的max-width无从参考
要不要加 display: block？
要，尤其是移动端。图片默认是 inline 元素，底部会留几像素空白（来自基线对齐），在窄屏上容易造成换行错位或容器高度异常。
-
display: block能彻底消除这个空白，让布局更可控 - 在
rich-text渲染的富文本中，这个空白有时会放大成明显间隙，影响图文混排 - 如果已用 Flex/Grid 布局，
display: block不是必须，但加上也无害
最易被忽略的一点：所有这些样式必须作用在最终渲染出的 img 标签上，而不是包裹它的容器。富文本场景下，样式无法继承，也不能靠父类统配——必须确保每个 img 都带上 max-width: 100%、height: auto 和 display: block，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
