unaipp修改图片样式,微信小程序无效果

作者再使用uniapp 写微信小程序的项目时,使用image,为项目添加图片,发现浏览器显示正常,微信开发者工具里面显示不正常,怎么调样式发现微信开发者工具样式不变后面看官方文档媒体组件 / image (qq.com)发现微信小程序里面设置的image组件默认宽度320px、高度240px

很离谱呀,不能自己改样式,要想改样式只能设置属性mode

通过mode来改变样式,mode就是图片缩放模式

属性类型默认值必填说明最低版本
srcstring
图片资源地址
modestringscaleToFill图片裁剪、缩放的模式

mode的值,根据自己的需要设置

scaleToFill缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
aspectFit缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
aspectFill缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
widthFix缩放模式,宽度不变,高度自动变化,保持原图宽高比不变
heightFix缩放模式,高度不变,宽度自动变化,保持原图宽高比不变2.10.3
top裁剪模式,不缩放图片,只显示图片的顶部区域。仅 Webview 支持。
bottom裁剪模式,不缩放图片,只显示图片的底部区域。仅 Webview 支持。
center裁剪模式,不缩放图片,只显示图片的中间区域。仅 Webview 支持。
left裁剪模式,不缩放图片,只显示图片的左边区域。仅 Webview 支持。
right裁剪模式,不缩放图片,只显示图片的右边区域。仅 Webview 支持。
top left裁剪模式,不缩放图片,只显示图片的左上边区域。仅 Webview 支持。
top right裁剪模式,不缩放图片,只显示图片的右上边区域。仅 Webview 支持。
bottom left裁剪模式,不缩放图片,只显示图片的左下边区域。仅 Webview 支持。
bottom right裁剪模式,不缩放图片,只显示图片的右下边区域。仅 Webview 支持。

 

  • 5
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值