使用方法
<image
src="{{list.image}}"
style="height:260rpx;width:100%"
mode="widthFix"
>
</image>
mode一共有13种模式，其中4种缩放模式9种裁剪模式
缩放:
- scaleToFill 不操持纵横比例缩放图片，使图片的宽度完全拉伸至填满image元素
- aspectFit 保持纵横比例缩放图片，使图片的长边能完全显示出来。也就是说，可以完整的将图片显示图片
- aspectFill 保持纵横比缩放图片，使图片的短边能完全显示出来。也就说图片通常只在水平或垂直方向使完整，另一个方向将发生截取
- widthFix 宽度不变，高度自动变化，保持原图宽度宽高比不变
裁剪
- top 不缩放图片，只显示图片的顶部区域
- bottom 不缩放图片，只显示图片的底部区域
- center 不缩放图片，只显示图片的中间的区域
- left 不缩放图片，只显示图片的左边的区域
- right 不缩放图片，只显示图片的右边区域
- top left 不缩放图片，只显示图片的左上边区域
- top right 不缩放图片，只显示图片的右上边区域
- bottom left 不缩放图片，只显示图片的左下方区域
- bottom right 不缩放图片，只显示图片的右下方区域
网友评论