手册
目录
收藏173
分享
阅读90464
更新时间2022-04-11
图片资源

注:image标签认宽度300px、高度225px
mode有13种模式,其中4中是缩放模式,9种是裁剪模式。

裁剪模式

示例:
image 图片 {{item.text}}
Page({
data: {
array: [{
mode: 'scaleToFill',
text: 'scaleToFill:不保持纵横比缩放图片,使图片完全适应'
}, {
mode: 'aspectFit',
text: 'aspectFit:保持纵横比缩放图片,使图片的长边能完全显示出来'
}, {
mode: 'aspectFill',
text: 'aspectFill:保持纵横比缩放图片,只保证图片的短边能完全显示出来'
}, {
mode: 'top',
text: 'top:不缩放图片,只显示图片的顶部区域'
}, {
mode: 'bottom',
text: 'bottom:不缩放图片,只显示图片的底部区域'
}, {
mode: 'center',
text: 'center:不缩放图片,只显示图片的中间区域'
}, {
mode: 'left',
text: 'left:不缩放图片,只显示图片的左边区域'
}, {
mode: 'right',
text: 'right:不缩放图片,只显示图片的右边边区域'
}, {
mode: 'top left',
text: 'top left:不缩放图片,只显示图片的左上边区域'
}, {
mode: 'top right',
text: 'top right:不缩放图片,只显示图片的右上边区域'
}, {
mode: 'bottom left',
text: 'bottom left:不缩放图片,只显示图片的左下边区域'
}, {
mode: 'bottom right',
text: 'bottom right:不缩放图片,只显示图片的右下边区域'
}],
src: '../../resources/cat.jpg'
},
imageError: function(e) {
console.log('image3发生error事件,携带值为', e.detail.errMsg)
}
})
不保持纵横比缩放图片,使图片完全适应

保持纵横比缩放图片,使图片的长边能完全显示出来

保持纵横比缩放图片,只保证图片的短边能完全显示出来

不缩放图片,只显示图片的顶部区域

不缩放图片,只显示图片的底部区域

不缩放图片,只显示图片的中间区域

不缩放图片,只显示图片的左边区域

不缩放图片,只显示图片的右边边区域

不缩放图片,只显示图片的左上边区域

不缩放图片,只显示图片的右上边区域

不缩放图片,只显示图片的左下边区域

不缩放图片,只显示图片的右下边区域

相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.2万人学习
共49课时
77万人学习
共29课时
61.7万人学习
共25课时
39.3万人学习
共43课时
70.9万人学习
共25课时
61.6万人学习
共22课时
23万人学习
共28课时
33.9万人学习
共89课时
125万人学习