<image src="../../images/one.png" mode="aspectFill" class="slide-image"/>
图片填充模式,开发工具并没有给予提示,所以图片里的mode还是需要自己稍微记一下。
根据文档mode分为13种:
四种缩放模式:
name | function |
---|---|
scaleToFill | 宽高同时拉伸,填充满整个image |
aspectFit | 以最长边为准进行缩放,显示出整个图片 |
aspectFitll | 以最短边为准进行缩放,显示去掉长边不在比例内部分后的图片 |
widthFix | 宽度不变,高度自动变化,保持原图宽高比例 |
九种裁剪模式:
name | function |
---|---|
top | 只显示图片的顶部区域 |
bottom | 只显示图片的底部区域 |
center | 只显示图片的中间区域 |
left | 只显示图片的左边区域 |
right | 只显示图片的右边区域 |
top left | 只显示图片的左上边区域 |
top right | 只显示图片的右上边区域 |
bottom left | 只显示图片的左下边区域 |
bottom right | 只显示图片的右下边区域 |
打完收工,具体效果,自己带进mode="xx"
里试试吧。