微信小程序图片按比例自适应显示

小程序的图片默认大小为320px*240px,有时候需求要显示多张图片（每张图片的规格不一致）自适应屏幕的宽，不失真。这时候你第一反应肯定是写：widht:100%;hegiht:auto;很遗憾地告诉你小程序的图片高度必须是数值，不然不会显示。如果你写：width:100%;那么默认的高度为240px,图片失真。由于每张图片的高度不一致，不能给出确定的高度。那么怎样让图片按比例自适应显示呢？

主要是用到小程序的图片组件image的一个属性bindload（下面会介绍）。

没处理之前，图片默认显示为：320px*240px,图片的原始高度并不是240，所以图片会变形。

小程序的图片组件是image,有一个bindload属性。

bindload：当图片载入完毕时会执行该函数，发布到 AppService 的事件名，事件对象event.detail = {height:’图片高度px’, width:’图片宽度px’}。

页面布局：

image：为图片数组；auto：经过计算之后每张图片的宽高。index：图片对应的索引。

js:

autoImage：每张图片加载完成之后会执行该函数

最后图片显示为：

微信小程序图片按比例自适应显示相关推荐

微信小程序图片在不同设备显示保持图片比例并且居中
最近都在开发微信小程序,碰到一个这样的问题,就是图片在不同尺寸手机要求不被压缩(长宽之比不变),并且上下左右居中,效果图如下(左iPhone 7Plus,中iPhone 7,右iPhone X): 刚 ...
微信小程序图片的比例问题
因为项目需要,第一次写微信小程序,一看代码跟vue的写法很像,便接下准备做,但是在写的时候发现微信小程序中image标签却不能像html中的img那样设置height或者weight为auto,一但设 ...
微信小程序图片等比缩放显示正中间
这是小程序 image标签的mode ,对图片的缩放做的处理缩放 scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素缩放 aspectFit 保持纵横比缩放 ...
微信小程序-图片等比例显示不变形
我的个人博客:https://okven.github.io/ mode 属性使用mode属性属性值设置为widthFix :宽度不变,高度自动变化,保持原图宽高比不变. <image cl ...
微信小程序图片等比例缩放（图片自适应屏幕）
index.wxml  <image style="width: {{imagewidth}}px; height: {{imagehei ...
微信小程序图片等比例缩-放（图片自适应屏幕）
1.wxml  <image style="width: {{imagewidth}}px; height: {{imageheight} ...
微信小程序图片比例被压缩
微信小程序图片比例被压缩解决: 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 ...

微信小程序图片按比例自适应显示

微信小程序图片按比例自适应显示相关推荐

最新文章

热门文章