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

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

原图

===================================================

缩放属性

scaleToFill

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

<image src="http://img1.gtimg.com/comic/pics/hv1/106/212/2174/141418516.jpg" 
class='in-image' mode='scaleToFill'> </image>

效果：

=========================================================

aspectFit

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

<image src="http://img1.gtimg.com/comic/pics/hv1/106/212/2174/141418516.jpg" 
class='in-image' mode='aspectFit'> </image>

效果：

=========================================================

aspectFill

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

<image src="http://img1.gtimg.com/comic/pics/hv1/106/212/2174/141418516.jpg" 
class='in-image' mode='aspectFill'> </image>

效果：

=========================================================

widthFix

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

<image src="http://img1.gtimg.com/comic/pics/hv1/106/212/2174/141418516.jpg" 
class='in-image' mode='widthFix'> </image>

效果：

=========================================================

heightFix（2.10.3版本以后）

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

<image src="http://img1.gtimg.com/comic/pics/hv1/106/212/2174/141418516.jpg" 
class='in-image' mode='heightFix'> </image>

效果：

裁剪属性（只给出前五种的样例图）

top

裁剪模式，不缩放图片，只显示图片的顶部区域

<image src="http://img1.gtimg.com/comic/pics/hv1/106/212/2174/141418516.jpg" 
class='in-image' mode='top'> </image>

效果：

=========================================================

buttom

裁剪模式，不缩放图片，只显示图片的底部区域

<image src="http://img1.gtimg.com/comic/pics/hv1/106/212/2174/141418516.jpg" 
class='in-image' mode='buttom'> </image>

效果：

=========================================================

center

裁剪模式，不缩放图片，只显示图片的中间区域

<image src="http://img1.gtimg.com/comic/pics/hv1/106/212/2174/141418516.jpg" 
class='in-image' mode='center'> </image>

效果：

====================================================================

left

裁剪模式，不缩放图片，只显示图片的左边区域

<image src="http://img1.gtimg.com/comic/pics/hv1/106/212/2174/141418516.jpg" 
class='in-image' mode='left'> </image>

效果：

====================================================================

right

裁剪模式，不缩放图片，只显示图片的右边区域

<image src="http://img1.gtimg.com/comic/pics/hv1/106/212/2174/141418516.jpg" 
class='in-image' mode='right'> </image>

效果：

====================================================================

top left

裁剪模式，不缩放图片，只显示图片的左上边区域

<image src="http://img1.gtimg.com/comic/pics/hv1/106/212/2174/141418516.jpg" 
class='in-image' mode='top left'> </image>

====================================================================

top right

裁剪模式，不缩放图片，只显示图片的右上边区域

<image src="http://img1.gtimg.com/comic/pics/hv1/106/212/2174/141418516.jpg" 
class='in-image' mode='top right'> </image>

====================================================================

bottom left

裁剪模式，不缩放图片，只显示图片的左下边区域

<image src="http://img1.gtimg.com/comic/pics/hv1/106/212/2174/141418516.jpg" 
class='in-image' mode='bottom left'> </image>

====================================================================

bottom right

裁剪模式，不缩放图片，只显示图片的右下边区域

<image src="http://img1.gtimg.com/comic/pics/hv1/106/212/2174/141418516.jpg" 
class='in-image' mode='bottom right'> </image>