微信小程序image组件的mode总结+介绍（包含heightFix）

2.10.3版本后，微信小程序的图片即image组件新增了heightFix属性（mode），总共具有14种属性，满足各种情况的放置需要。14种属性可以分为两大类，一种是完全保留的缩放属性，一种是裁剪属性。

原图

缩放属性 

scaleToFill

缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

效果：

aspectFit 

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

效果：

aspectFill 

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

效果：

widthFix 

缩放模式，宽度不变，高度自动变化，保持原图宽高比不变

效果：

heightFix（2.10.3版本以后） 

缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

效果： 

裁剪属性

top

裁剪模式，不缩放图片，只显示图片的顶部区域，图片的宽度会被拉伸至填满元素。

效果：

bottom 

裁剪模式，不缩放图片，只显示图片的底部区域，图片的宽度会被拉伸至填满元素。

效果：

center 

裁剪模式，不缩放图片，只显示图片的中间区域，图片的宽度会被拉伸至填满元素。

效果：

left 

裁剪模式，不缩放图片，只显示图片的左边区域，图片的宽度会被拉伸至填满元素。

效果：

right

裁剪模式，不缩放图片，只显示图片的右边区域，图片的宽度会被拉伸至填满元素。

效果：

top left 

裁剪模式，不缩放图片，只显示图片的左上边区域，图片的宽度会被拉伸至填满元素。

top right

裁剪模式，不缩放图片，只显示图片的右上边区域，图片的宽度会被拉伸至填满元素。

bottom left

裁剪模式，不缩放图片，只显示图片的左下边区域，图片的宽度会被拉伸至填满元素。

bottom right

裁剪模式，不缩放图片，只显示图片的右下边区域，图片的宽度会被拉伸至填满元素。