mode="widthfix"最直接有效，三端行为一致，需父容器宽度可控；它强制图片铺满父宽并等比缩放，由底层原生实现，比css更可靠。
mode="widthFix" 是最直接有效的方案，三端（H5、小程序、App）行为一致，无需 JS 计算或额外样式——但前提是父容器宽度可控，否则图片可能塌陷为一条线或完全不显示。
为什么mode="widthFix"能直接生效
它会让 <image></image> 组件强制铺满父容器宽度，并按原始宽高比等比缩放高度，不拉伸、不裁剪。这个逻辑由 uni-app 底层原生组件实现，不是靠 CSS 模拟，所以比 max-width: 100% 更可靠，尤其在小程序 rich-text 或 <swiper-item></swiper-item> 这类受限上下文中。
- 必须配合父容器有明确宽度（比如
width: 100%或具体 rpx 值），否则widthFix会失去参照 - 不要同时设
style="width: 100%"和mode="widthFix"，后者已隐含该行为，冗余设置反而可能干扰渲染 - 在 flex 布局中，若父容器是
flex: 1，需额外加flex-shrink: 0防止图片被压缩到 0 高度
富文本里图片不听 widthFix 怎么办
因为 <rich-text></rich-text> 不认 mode 属性，只能靠预处理 HTML 字符串。核心动作是：删掉所有 width/height 属性、清空原有 style、注入自适应样式。
- 正则替换示例：
html.replace(/<img>]*>/gi, match => match.replace(/(width|height|style)=["']?[^"']*["']?/gi, '').replace(/<img style="max-width:90%"> - 必须用
max-width: 100%，不能用width: 100%，否则小图会被强行拉宽变形 - 小程序中
!important是必需的，否则富文本内联样式权重太高，你的 CSS 会被忽略
轮播图里图片高度还是不对
<swiper></swiper> 默认高度固定，<image mode="widthFix"></image> 只能控制图片自身，不会反向撑开 <swiper></swiper> 容器。必须手动同步高度。
- 推荐做法：用
uni.getSystemInfoSync().windowWidth获取屏幕宽度，再根据图片原始比例计算出期望高度（例如 750px 设计稿下图片是 750×300，则实际高度 =w / 2 * 300 / 750） - 给
<swiper></swiper>加动态:style="{ height: bannerHeight + 'px' }"，bannerHeight从 JS 计算得来 - 避免用
@load动态设高：真机上图片加载时机不稳定，容易导致闪动或高度错位
真正容易被忽略的是「父容器宽度是否真的传递到了 <image></image>」——尤其是在嵌套 <swiper-item></swiper-item> + <view></view> + flex 的场景里，哪怕只漏了一个 width: 100%，widthFix 就会彻底失效。
