uni-app微信小程序图片组件的等比例缩放和自适应裁切显示

uni-app微信⼩程序图⽚组件的等⽐例缩放和⾃适应裁切显⽰
微信⼩程序的组件和普通的 HTML 有所不同，⽐如 HTML 的div在⼩程序⾥⾯是view，HTML 的span在⼩程序⾥是text。

因为 uni-app 要兼容多终端和各种⼩程序，所以它的语法和微信⼩程序是基本⼀致的。

今天就整理⼀下⼩程序的图⽚组件（image）的缩放和裁切显⽰实现，下⾯以 uni-app 为例。

如果在页⾯中增加⼀个<image />标签，不设置任何样式的话，它会占据很⼤⼀块空间。

查看 uni-app 源码可以发现，图⽚组件有⼀个320px 的宽度和240px的⾼度。

/* CSS */
uni-image {
width: 320px;
height: 240px;
display: inline-block;
overflow: hidden;
position: relative
}
这样，如果只给图⽚设置宽度或者⾼度的话，会导致图⽚被拉伸。

⼀般给image设置⼤⼩的时候要同时指定宽度和⾼度：
/* CSS */
.image {
width: 150px;
height: 150px;
}
如果图⽚的长度和宽度不固定，可以设定宽度（或⾼度），然后⾼度（或宽度）⾃适应：
/* CSS */
.image {
width: 150px;
height: auto;
}
但如果⼀个列表中的图⽚⼤⼩不⼀，就⽐较⿇烦。

不过不⽤担⼼，微信⼩程序为image组件提供了⼀个mode属性。

mode属性不仅可以让图⽚等⽐例缩放，还可以⾃动裁切，按照意愿进⾏显⽰。

⽐如等⽐例显⽰，我们可以给图⽚设置⼀个宽度，然后设置mode="widthFix"，这样图⽚也不会被拉伸：
<!-- HTML -->
<image class="image" mode="widthFix" />
/* CSS */
.image {
width: 150px;
}
⽐如⽤户头像，图⽚的宽⾼是固定的，图⽚如果⽐较长，可以使⽤mode="aspectFill"等⽐例缩放，⾃动裁剪短边填充：
<!-- HTML -->
<image class="image" mode="aspectFill" />
/* CSS */
.image {
width: 150px;
height: 150px;
}
这样即可以按照尺⼨显⽰图⽚，⼜不会被拉伸了。

image组件的mode属性还有很多参数，使⽤起来⾮常灵活：
scaleToFill缩放模式，不保持纵横⽐缩放图⽚，使图⽚的宽⾼完全拉伸⾄填满image元素。

aspectFit缩放模式，保持纵横⽐缩放图⽚，使图⽚的长边能完全显⽰出来。

也就是说，可以完整地将图⽚显⽰出来。

aspectFill缩放模式，保持纵横⽐缩放图⽚，只保证图⽚的短边能完全显⽰出来。

也就是说，图⽚通常只在⽔平或垂直⽅向是完整的，另⼀个⽅向将会发⽣截取。

widthFix缩放模式，宽度不变，⾼度⾃动变化，保持原图宽⾼⽐不变。

heightFix缩放模式，⾼度不变，宽度⾃动变化，保持原图宽⾼⽐不变。

top裁剪模式，不缩放图⽚，只显⽰图⽚的顶部区域。

bottom裁剪模式，不缩放图⽚，只显⽰图⽚的底部区域。

center裁剪模式，不缩放图⽚，只显⽰图⽚的中间区域。

left裁剪模式，不缩放图⽚，只显⽰图⽚的左边区域。

right裁剪模式，不缩放图⽚，只显⽰图⽚的右边区域。

top left裁剪模式，不缩放图⽚，只显⽰图⽚的左上边区域。

top right裁剪模式，不缩放图⽚，只显⽰图⽚的右上边区域。

bottom left裁剪模式，不缩放图⽚，只显⽰图⽚的左下边区域。

bottom right裁剪模式，不缩放图⽚，只显⽰图⽚的右下边区域。