微信小程序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;
    })
  },
相关推荐
CHU7290355 小时前
安心陪伴,便捷就医:陪诊代办小程序的温暖设计
前端·小程序·php
CHU7290356 小时前
线上扭蛋机拆盒小程序前端功能版块解析
前端·小程序·php
深海蓝山9 小时前
基于Canvas的原生签名组件,兼容小程序和H5
小程序·canvas·签名
毕设源码-邱学长9 小时前
【开题答辩全过程】以 基于微信小程序的课程表信息系统的开发实现为例,包含答辩的问题和答案
微信小程序·小程序
CHU72903510 小时前
线上美容预约小程序:开启便捷美肤新方式
小程序
云上凯歌10 小时前
01_AI工具平台项目概述.md
人工智能·python·uni-app
编程、小哥哥10 小时前
物业小程序(业主端+物业端)功能逻辑图与原型图
小程序
Goona_10 小时前
PyQt+Excel学生信息管理系统,增删改查全开源
python·小程序·自动化·excel·交互·pyqt
郑州光合科技余经理10 小时前
O2O上门预约小程序:全栈解决方案
java·大数据·开发语言·人工智能·小程序·uni-app·php