分类: 微信小程序

微信小程序图片宽高自适应

[ 2022-12-12 16:35:24 | 作者: admin ]
字号: 大 | 中 | 小
第一、图片高度自适应
微信小程序<image>有默认的宽高width:320rpx;height:240rpx;只设置width：100%是无效的，即使写了height：100%，依然无效。
只要在<image>标签添加mode="widthFix"属性，就可以做到高度自适应，
<image src="{{carouselpic}}" mode="widthFix" style="width:100%" />


第二、宽度100%：发现在模拟器上显示一切正常，但是到了手机上右侧会空出一点空白边。

解决：
<image src="{{carouselpic}}" mode="widthFix" style="width:{{screenWidth}}px" />

上面的screenWidth 是通过wx.getSystemInfoSync().windowWidth来获取。

这样就可以完美的解决了。

微信开放文档： https://developers.weixin.qq.com/miniprogram/dev/component/image.html
[最后修改由 admin， 于 2022-12-12 16:39:04]
评论Feed 评论Feed: http://blog.xg98.com/feed.asp?q=comment&id=2899

这篇日志没有评论。

此日志不可发表评论。