联系我们 - 广告服务
您的当前位置:主页 > 布局 > 开发 >

媒体组件 image

来源:未知 编辑:admin 时间:2018-01-19
导读: 一个应用中图片是必不可少的,就像HTML提供了img/标签一样,小程序提供了image/组件。小程序中的image/除了可以显示图片外,还提供了图片的裁剪、缩放模式属性,这大大丰富了image/的显示能力。image/默认宽度为300px,默认高度为225px,属性如下:src:图片
 一个应用中图片是必不可少的,就像HTML提供了<img/>标签一样,小程序提供了<image/>组件。小程序中的<image/>除了可以显示图片外,还提供了图片的裁剪、缩放模式属性,这大大丰富了<image/>的显示能力。<image/>默认宽度为300px,默认高度为225px,属性如下:·src:图片资源地址。可以是网络地址,也可以是本地图片的相对地址。·mode:图片的裁剪、缩放模式。默认值为“scaleToFill”。·binderror:当错误发生时,发布到App Service的事件名,事件对象event.detail={errMsg:'something wrong'}。·bindload:当图片载入完毕时,发布到App Service的事件名,事件对象event.detail={height:'图片高度px',width:'图片宽度px'}。·mode属性有一共有13种裁剪模式,其中4种是缩放模式,9种是裁剪模式。·缩放模式:·scaleToFill:不保持纵横比缩放图片,使图片的宽高完全拉伸至填满image元素。·aspectFit:保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。·aspectFill:保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。·widthFix:宽度不变,高度自动变化,保持原图宽高不变,这时图片原有高度样式会失效。·裁剪模式:·top:不缩放图片,只显示图片的顶部区域。·bottom:不缩放图片,只显示图片的底部区域。·center:不缩放图片,只显示图片的中间区域。·left:不缩放图片,只显示图片的左边区域。·right:不缩放图片,只显示图片的右边区域。
·top left:不缩放图片,只显示图片的左上边区域。·top right:不缩放图片,只显示图片的右上边区域。·bottom left:不缩放图片,只显示图片的左下边区域。·bottom right:不缩放图片,只显示图片的右下边区域。图a使用一张原图大小为720px×450px的图,和大小为300px×300px的image组件为大家展示不同模式下的显示效果。


责任编辑:admin

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

上一篇:导航组件
下一篇:audio

网友评论:

在“\templets\demo\comments.htm”原来的内容全部删除,插入第三方评论代码,如果不需要评论功能,删除comments.html里面的内容即可
推荐使用友言、多说、畅言(需备案后使用)等社会化评论插件

Copyright © Tricks资讯网 版权所有
本站所有资讯来源于网络 如有侵权请联系QQ:940910888 技术支持鹏博科技
Top