mode="widthFix"是首选方案，因它原生支持三端一致的等比缩放，宽度铺满容器、高度自适应且不拉伸不裁剪，无需JS计算或额外CSS；但需确保父容器宽度可控，否则易失效。
直接用 mode="widthFix" 就能实现图片宽度 100%、高度按比例自适应，不需要 JS 计算或额外样式——但前提是容器本身宽度可控，且不能依赖 height: auto 在所有场景下生效。
为什么 mode="widthFix" 是首选方案
uni-app 的 widthFix 表示“按宽度缩放，高度等比”，它会强制让图片宽度铺满父容器，同时保持原始宽高比。这个行为在 H5、小程序、App 三端都一致，无需 hack。
- 不拉伸、不裁剪，只缩放
- 无需监听
@load获取原始尺寸再计算高度 - 避免因
height: auto在某些渲染上下文（如
widthFix 失效的常见场景和修复方式
看似简单，但在实际项目中容易因父容器限制或布局嵌套而失效。典型表现是图片显示为一条细线、完全不显示，或高度为 0。
- 父容器没设宽度（比如
width或没继承父级宽度）→ 给父容器加width: 100%或明确值（如375rpx） - 图片放在
swiper默认高度固定，需配合display: block和width: 100%，或用bind:change动态改 swiper 高度 - 使用了
flex布局但没设flex-shrink: 0→ 图片被压缩，加flex-shrink: 0防止收缩
需要动态撑满屏幕宽度时怎么处理
如果图片要严格匹配屏幕宽度（比如 banner），不能只靠 rpx 或百分比，得用 uni.getSystemInfoSync().windowWidth 换算像素值。
- 获取真实屏幕宽度：
const w = uni.getSystemInfoSync().windowWidth - 图片宽高需传入 px 值（canvas 或某些第三方库要求），此时用
w直接赋值，而非 rpx - 注意：rpx 在 canvas 绘制中无效，
context.drawImage()只认 px，必须手动换算（如设计稿 750px → 实际宽度 =w / 2）
示例：context.drawImage(img, 0, 0, w, (img.height / img.width) * w)
rich-text 中的图片怎么同步适配
mode 属性，内部
- 正则替换所有
为
- 更稳妥的做法是加 class 并全局定义：
.rt-img { width: 100% !important; height: auto !important; } - 若需保留原始比例又防拉伸，用
max-width: 100%; height: auto;替代width: 100%，避免超大图撑爆容器
关键点在于：rich-text 渲染后无法用 CSS 选择器精确控制子 !important。
真正容易被忽略的是容器层级关系——哪怕写了 mode="widthFix"，只要上层某个 position: absolute 脱离文档流，图片就会失效。调试时优先检查父容器 computed style 的 width 是否为 0 或 auto。
