微信小程序-图片等比例显示不变形
我的个人博客:https://okven.github.io/
mode 属性
使用mode属性 属性值设置为widthFix :宽度不变,高度自动变化,保持原图宽高比不变。
<image class='manImg' mode='widthFix' style="width:100%;" src='{{item.starItem.imageUrl}}' />
bindLoad函数
使用bindload绑定函数动态自适应。 当图片发布完毕时,调用这个函数实现动态自适应
//wxml
<image class='manImg' bindload="imageLoad" style="width:{{imgwidth}}rpx; height:{{imgheight }}rpx;" src='{{item.starItem.imageUrl}}' />//js
imageLoad: function(e) {let _this=this;let width=e.detail.width, //获取图片真实宽度height=e.detail.height,ratio=width/height; //图片的真实宽高比例let viewWidth=500, //设置图片显示宽度,viewHeight=500/ratio; //计算的高度值this.setData({imgwidth:viewWidth,imgheight:viewHeight})
}
推荐第一种:
原因: 第二种实现方式每次图片发布完毕时都会执行一次通信(setData),营销页面渲染效率。
第一种方式的优点在于 当宽度设置百分比100%时,宽度自然会自适应。换一种思路完全可以用外层的view去控制图片
微信小程序-图片等比例显示不变形相关推荐
- 微信小程序图片的比例问题
因为项目需要,第一次写微信小程序,一看代码跟vue的写法很像,便接下准备做,但是在写的时候发现微信小程序中image标签却不能像html中的img那样设置height或者weight为auto,一但设 ...
- 微信小程序图片按比例自适应显示
小程序的图片默认大小为320px*240px,有时候需求要显示多张图片(每张图片的规格不一致)自适应屏幕的宽,不失真.这时候你第一反应肯定是写:widht:100%;hegiht:auto;很遗憾地告 ...
- 微信小程序图片404时显示默认图片
由于在项目中多个页面都要用到这个代码,所以我们在utils文件夹中新建一个errorImage.js,便于在其他页面引用 errorImage.js: //远程图片no found情况下指引 func ...
- 微信小程序 图片等比例缩放(图片自适应屏幕)
index.wxml <!--图片宽高大于屏幕宽高--> <image style="width: {{imagewidth}}px; height: {{imagehei ...
- 微信小程序 图片等比例缩-放(图片自适应屏幕)
1.wxml <!--图片宽高大于屏幕宽高--> <image style="width: {{imagewidth}}px; height: {{imageheight} ...
- 微信小程序使用image组件显示图片的方法
本文实例讲述了微信小程序使用image组件显示图片的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 代码如下: <image style=" ...
- 微信小程序图片比例被压缩
微信小程序图片比例被压缩 解决: mode='aspectFit' <image class='search' src='/icon/search.png' mode='aspectFit'&g ...
- 微信小程序图片全屏预览组件,并解决svg真机显示黑屏问题
自己码了个微信小程序图片全屏预览组件,并解决了svg真机显示黑屏问题(即png等格式可以正常显示,但就svg无法显示). /*** 微信小程序图片预览组件* 1.支持预览svg.png.jpeg.jp ...
- 关于微信小程序图片不显示的问题解决方案
关于微信小程序图片不显示的问题解决方案 经过查阅资料发现如下文档导致图片不显示: 1.本地图片是用image加载的:src="../../../images/ic_header.jpg&qu ...
最新文章
- html页面选择指定条件在下方显示,如何从符合特定条件的HTML中找到CSS选择器?...
- NOIP模拟测试9「随·单·题」
- java比较炫的登录界面_html+css实现漂亮的透明登录页面,HTML实现炫酷登录页面...
- 嵌入式基础认识2:shell脚本的一些简单语法规则
- samba安装_Centos安装Samba
- linux18.0.4安装mysql
- [转载]Shell正则表达式
- 软件项目中需求管理工作的重要性
- 2022年考研计算机组成原理_2 数据表示和运算
- Linux-tftp、tftpd-pha安装、使用、配置教程
- Intel Thunderbolt 3 接口介绍
- Android自定义星星评分控件,高效
- 用js做一个数字华容道
- 在线问诊小程序|互联网医院系统好处有哪些?
- Excel VBA高级编程 -自动去除重复项 自动求和
- PTA 7-40 统计闰年个数
- ftp上传老是失败 [L] TYPE A [L] 200 Type set to A. [L] MODE Z [L] 200 MODE Z ok. [L] PASV [L] 550 Pa
- lombok中的builder注解居然是一种设计模式:让我们了解一下超级实用的“建造者模式”吧
- 微信小程序-006-投票功能-搜索投票
- 101条伟大的计算机编程名言