1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 微信小程序图片自适应宽高比例显示解决方法

微信小程序图片自适应宽高比例显示解决方法

时间:2020-12-15 05:43:55

相关推荐

微信小程序图片自适应宽高比例显示解决方法

微信小程序开发交流qq群 173683895

承接微信小程序开发。扫码加微信。

正文:

解决方案一:写固定宽度,然后使用 image 组件中 mode 属性的 widthFix ;

先看效果图:

实现代码:

<image class='my_img' mode='widthFix' src='{{img}}'></image>

.my_img {width: 300rpx;}

image:

解决方案二:利用bindload方法获取图片的宽高,然后获得它的宽高比例

<image bindload="imageLoad" src='{{img}}'></image>

imgLoad: function (e) {var width = e.detail.width,//图片宽度height = e.detail.height,this.setData({img_ratio: width / height,//图片宽高比例})},

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