当前位置: 首页 > news >正文

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

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

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

   <image class="bubbleImg" src="{{imageUrl}}" bindload="onImageLoad" style="width: {{imgWidth || 0}}px;" mode="widthFix"></image>
 //获取图片宽度onImageLoad(event) {var { width } = event.detail;const key = event.currentTarget.dataset.key;if(width>200){ //最大值为200pxwidth=200}this.setData({imgWidth : width;})},
http://www.lryc.cn/news/246011.html

相关文章:

  • 虚幻学习笔记—文本内容处理
  • WhatsApp API号解封教程(内含图片指引和申诉模板)
  • 爬取极简壁纸
  • docker操作手册
  • css Vue尺子样式
  • C++ 数据结构之-最小栈(MinStack)
  • 【日常总结】优雅升级Swagger 2 升至 3.0, 全局设置 content-type application/json
  • 2023.11.27如何使用内网穿透工具实现Java远程连接操作本地Elasticsearch搜索引擎
  • HNU 练习八 结构体编程题1. 评委打分
  • 数据结构:字典树(前缀树,Trie树),压缩字典树(Radix)
  • 前端学习系列之html
  • Star History 十月开源精选 |AI for Postgres
  • 网络运维与网络安全 学习笔记2023.11.23
  • 红黑树(万字图文详解)
  • Kotlin学习——kt入门合集博客 kt里的委派模式Delegation kt里的特性
  • 数据挖掘 朴素贝叶斯
  • UI自动化测试工具有哪些优势?
  • 【论文阅读笔记】InstructDiffusion: A Generalist Modeling Interface for Vision Tasks
  • 笔记62:注意力汇聚 --- Nadaraya_Watson 核回归
  • 给定一个n×n的方阵,本题要求计算该矩阵除副对角线、最后一列和最后一行以外的所有元素之和。
  • Go语言的学习笔记3——Go语言项目布局
  • 70-76-堆、贪心算法
  • Qt Network
  • Win10电脑用U盘重装系统的步骤
  • 安防视频监控/磁盘阵列/集中云存储平台EasyCVR设备录像保活不生效原因是什么?该如何解决?
  • 【JDK21】详解虚拟线程
  • UE5 - 虚幻引擎各模块流程图
  • vue3实现element table缓存滚动条
  • flutter布局详解及代码示例(下)
  • SQL Server:流程控制语言详解