widthFix需配合容器约束与平台差异处理，否则三端表现冲突；其仅保证等比缩放，依赖父容器高度可控、避免CSS干扰，且各端实现差异大，须动态适配并构建完整约束链。
mode="widthFix" 是最直接有效的方案，但必须配合容器约束和平台差异处理，否则在 App、小程序、H5 三端表现会互相冲突。
为什么 widthFix 不能单独用
很多人加了 mode="widthFix" 还是变形，是因为没控制容器行为：widthFix 只保证「高度随宽度等比缩放」，但若父容器高度塌陷（比如 flex 布局里没设高）、或被其他 CSS 干扰（如 height: 100% 没继承链），图片实际渲染区域就不可控。
- App 端（尤其 Android）x5 内核对
widthFix的实现较弱，常退化为拉伸，必须配合固定宽高的容器 +flex: 1或overflow: hidden - 微信小程序中，若容器设了固定
height（如height: 400rpx），widthFix会被忽略，优先按 height 计算——此时应改用mode="scaleToFill"+overflow: hidden裁剪 - H5 端可补
object-fit: contain，但需条件编译：#ifdef H5，否则小程序和 App 会报样式无效警告
如何动态适配不同屏幕宽度
固定写 width: 750rpx 在全面屏或折叠屏上会溢出，真正安全的做法是用 uni.getSystemInfo 获取 windowWidth 后动态计算目标宽。
- 列表项图片：设容器
width: 100%，再用:style="{ width: imgWidth + 'px' }"绑定动态值，避免 rpx 在高刷屏（90Hz/120Hz）下因像素密度换算漂移 - 全屏 banner：取
windowWidth作为图片宽度，高度按原始比例算，例如imgHeight = (windowWidth / originalWidth) * originalHeight - 慎用
max-width：在 iPad 等大屏设备上，max-width: 400rpx实际可能只有 200px，导致图片过小；建议用vw或 JS 动态判断设备类型再设限
Canvas 绘图时的等比陷阱
直接写 ctx.drawImage(img, x, y, width, height) 是变形主因——你把任意比例原图硬塞进固定矩形。必须先获取原始尺寸再算缩放系数。
- 调
uni.getImageInfo({ src })拿到width和height，别依赖img.naturalWidth（H5 可用，小程序和 App 不可靠） - 目标区域为
boxWidth × boxHeight，算出宽高比ratio = width / height，再分情况：- 若
boxWidth / boxHeight > ratio：以高度为基准 →imgH = boxHeight，imgW = ratio * imgH - 否则以宽度为基准 →
imgW = boxWidth，imgH = imgW / ratio
- 若
- 绘图前务必
ctx.save()+ctx.clip()先裁出目标区域，再用计算出的imgW/imgH绘制，否则边缘可能溢出
真正难的不是写一行 mode="widthFix"，而是让这行代码在 iOS、Android、微信、支付宝、H5 五种环境下都输出一致结果——跨端图片缩放的本质是「约束传递」：你得把宽高、容器、缩放模式、渲染层全部串成一条可控链，漏掉任何一环，变形就会在某个端突然冒出来。
