如何调整微信小程序中动态图片尺寸的设置技巧？

本文共计770个文字，预计阅读时间需要4分钟。

我们知道微信小程序的组件`image`是用来显示图片的，它具有以下属性：

1.`src`：图片资源地址

2.`mode`：图片裁剪、缩放的模式

3.`binderror`：当错误发生时，发布到`AppService`的事件名，事件内容为错误信息

我们都知道微信小程序的组件image是用来显示图片的，它有一下几个属性：

1、src 图片资源地址

2、mode 图片裁剪、缩放的模式

3、binderror 当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: ‘something wrong'}

4、bindload 当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}

但是image有默认的固定的宽度和高度，这样我们在做图片自适应的时候，就不好做了，特别是我们在做一些商品详情页的时候，需要image自适应屏幕,按原图比例显示。那么如何让image自适应比例显示呢？可以有两种方法：

一、使用mode：widthFix

widthFix：宽度不变，高度自动变化，保持原图宽高比不变。

首先我们先设置image的mode为widthFix，然后给图片加一个固定rpx的宽度，比如：730rpx。

这样图片也可以自适应了。。