在image标签中加入mode='aspectFit'属性，即可让图片保持纵横比缩放图片。

在一个动态页面编辑中，因为要插入图片，理所应当的我加入了image标签，这是加入图片必然的方法。

接下来进行属性的调整，一开始我为图片加一个外层容器，方便调整属性，把图片放进去：

接下来我想当然的以为图片的height与width是auto，以为auto的字面意思就是自动，图片就会自动调整，结果设置之后图片的影子都木得了o(╥﹏╥)o！！！（大家自行尝试）

之后便各种网络自学，在微信官方文档里面发现了这么一个神奇的东西 mode ！！！

mode 的默认值是scaleToFill，功能是缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素，就不符合我们所需要的。

我们所需要的保持长宽比不变的是aspectFit和aspectFill。

aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

下面是官网给出的实例图片：

根据上面两个图片，不难看出aspectFit最符合我们的要求。

需要注意的是，image组件默认宽度300px、高度225px，所以在使用时，要根据你的需要改变image的大小，我这里改成这样的style="height: 400rpx; width: 620rpx;"

下面是我的部分代码，可供参考学习。

效果如图所示： 创作不易，欢迎点赞支持！！！ 转载请注明出处。