失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 微信小程序 --- 图片自适应 本地图片的使用

微信小程序 --- 图片自适应 本地图片的使用

时间:2019-09-28 03:09:58

相关推荐

微信小程序 --- 图片自适应 本地图片的使用

1、关于图片自适应

image标签中添加mode属性:

默认值:scaleToFill ---- 不保持纵横比例缩放图片,使图片的宽高完全拉伸至填满image标签

aspectFit ---- 保持纵横比例缩放图片,使图片的长边能够完全显示出来,也就说图片可以完整的显示出来

aspectFill -----保持纵横比例缩放图片,只保证图片的短边能够完全显示出来,也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取

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

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

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

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

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

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

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

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

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

2、关于图片引用

在wxss页面中不能引用本地的图片

解决方案:

1、要是希望在wxss文件中使用背景图,我们可以使用网络图片,或者base64位的图片

2、通常情况下在CSS文件中我们是没有办法拿到后台返回的域名,然后我们又希望可以使用一些本地的小图标之类的,我们可以在wxml中使用背景图,直接在view的style中写样式

例如:

3、在页面中直接使用image标签,然后使用绝对定位

如果觉得《微信小程序 --- 图片自适应 本地图片的使用》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。