移动端富文本图片自适应需三步：父容器设max-width:100%并确保宽度可计算；图片用max-width:100%+height:auto+display:block；清除html内联宽高及干扰样式，配合srcset和aspect-ratio防布局抖动。
移动端富文本里的图片要真正按百分比自适应，不能只靠 width: 100%，关键得让图片“知道该参照谁”，并守住原始比例。核心是三件事：父容器有可计算宽度、图片自身用 max-width: 100% + height: auto、清除干扰项。
父容器必须有明确宽度约束
富文本内容（比如从后台编辑器生成的 HTML）通常包裹在 <div class="rich-text"> 里。如果这个容器没设宽度，或仅靠 <code>margin: 0 auto 居中却不写 width，那里面所有 max-width: 100% 的图片都会失去参照，仍按原图尺寸渲染，小屏直接溢出。
- 给富文本容器加
width: 100%或max-width: 100%（推荐后者，兼容性更稳） - 若用 Flex 布局，注意子项默认
min-width: auto会阻止收缩，需额外加min-width: 0 - 检查开发者工具的 Computed 面板，确认容器的
width不是auto或0px
图片样式必须用 max-width + height:auto 组合
直接写 width: 100% 是常见误区——它强制拉伸，破坏宽高比；而 max-width: 100% 表示“最多占满父容器”，配合 height: auto 才能等比缩放。
- 推荐基础样式：
img { max-width: 100%; height: auto; display: block; } -
display: block防止行内元素基线对齐导致的底部空白 - 绝对不要同时写
width: 100%和height: auto，Safari 等浏览器可能忽略 height - 务必删掉 HTML 中的
width和height属性（如<img style="max-width:90%" style="max-width:90%">），否则会覆盖 CSS 的height: auto
富文本场景下的特别处理
富文本常含用户随意插入的图片，无法预设尺寸，所以更要防“意外”。除了基础缩放，还需考虑加载效率和布局稳定。
- 为图片添加
srcset和sizes，避免手机加载桌面大图。例如：<img src="small.jpg" srcset="small.jpg 480w, medium.jpg 768w" sizes="(max-width: 480px) 100vw, 50vw"> - 若富文本容器本身有固定高度（如卡片封面），且图片比例不统一，改用
object-fit: cover或contain，但前提是容器已设明确宽高 - 为防止图片加载时布局跳动，可用
aspect-ratio（现代浏览器）或传统padding-bottom占位法预留空间
富文本图片的响应式不是单一样式能解决的，而是容器、图片、资源三者协同的结果。把父容器宽度定住，图片用对组合，再清理掉 HTML 内联尺寸，基本就到位了。
