微信小程序image组件图片设置最大宽度 宽高自适应

问题描述:在使用微信小程序image组件的时候,在不确定图片宽高情况下 想给一个最大宽度让图片自适应,按比例,image的widthfiex和heightFiex并不能满足(只指定最大宽/高并不会生效)

问题解决:使用bindload获取图片信息获取宽高再判断是否超过最大值

html 复制代码
   <image class="bubbleImg" src="{{imageUrl}}" bindload="onImageLoad" style="width: {{imgWidth || 0}}px;" mode="widthFix"></image>
   
js 复制代码
 //获取图片宽度
  onImageLoad(event) {
    var { width } = event.detail;
    const key = event.currentTarget.dataset.key;
    if(width>200){ //最大值为200px
	   width=200
	}
    this.setData({
      imgWidth : width;
    })
  },
相关推荐
AnalogElectronic2 小时前
uniapp学习5,兼容微信小程序的俄罗斯方块游戏
学习·微信小程序·uni-app
克里斯蒂亚诺更新7 小时前
微信小程序调用腾讯地图路线规划-注意点
微信小程序·小程序
AnalogElectronic8 小时前
uniapp学习6,滚动字幕播报
javascript·学习·uni-app
AnalogElectronic9 小时前
uniapp学习3,简易记事本
学习·uni-app
土土哥V_araolin9 小时前
一生手护分销模式系统开发概述
大数据·小程序·零售
Можно9 小时前
uni-app 三端上线全流程指南:H5 / 小程序 / App 完整发布手册
小程序·uni-app
土土哥V_araolin9 小时前
2+1链动退休模式系统(升级版)解析
大数据·小程序·零售
2501_9151063211 小时前
Flutter 开发工具有哪些 跨平台项目开发与上架实操指南
android·flutter·ios·小程序·uni-app·iphone·webview
摇滚侠11 小时前
JAVA 项目教程《苍穹外卖-10》,微信小程序项目,前后端分离,从开发到部署
java·开发语言·微信小程序
AnalogElectronic11 小时前
uniapp学习7,美团闪购生鲜蔬菜商家详情页
javascript·学习·uni-app