微信小程序image组件mode属性详解

今天学习微信小程序开发的image组件，mode属性的属性值不少，一开始有点整不明白。后来从网上下载了一张图片，把每个属性都试验了一番，总算明白了。现总结归纳如下：

1.使用scaleToFill。这是mode的默认值，scaleToFill会让图片变形，效果见下图，但是图片能完整显示。

<image src="/images/luban.jpg" mode="scaleToFill" />

2.使用aspectFit属性值，实现image组件在保持图片宽高比不变的情况下使图片长边能够完全显示出来，图片完整显示，图片不变形。这里都是和默认值scaleToFill作对比。

<image src="/images/luban.jpg" mode="aspectFit" />

3.使用aspectFill属性，实现image组件在保持图片宽高比不变的情况下，使图片短边能够完全显示出来，另一边不完整显示。这里可以看到，鲁班的头部没有显示完整，图片不变形。

<image src="/images/luban.jpg" mode="aspectFill" />

 4.使用widthFix属性，image组件保持图片宽高比不变的情况下，图片宽度不变，高度自动变化，图片完整显示。

<image src="/images/luban.jpg" mode="widthFix" />

5.使用heightFix属性，image组件保持图片宽高比不变的情况下，图片高度不变，宽度自动变化。图片完整显示。高度定了，宽度由高度决定，也就是图片不变形，等比例变化。图片整体看上去比上一张图片4小。

<image src="/images/luban.jpg" mode="heightFix" />

6.下面是mode取值为top、bottom、center、left、right、top left、top right、bottom left、bottom right等，显示图片的不同部分。我也逐一做了验证，没有什么不好理解的，这里以top和bottom left为例，分别显示了顶部头的部分和左下方手的部分。效果图如下。

<image src="/images/luban.jpg" mode="top" />

<image src="/images/luban.jpg" mode="bottom left" />

都说实践出真知，感觉有一些懵懵懂懂，模糊不清的地方，自己动手实践一下，做一下比较，基本就会理解。