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 裁剪模式，不缩放图片，只显示图片的右下边区域。
未经允许不得转载：w3h5 » uni-app&微信小程序图片组件的等比例缩放和自适应裁切显示