uniapp 小程序实现图片宽度100%、高度自适应的效果

因为image组件默认是有宽度跟高度的,所以这个高度不怎么好写

图片[1] - uniapp 小程序实现图片宽度100%、高度自适应的效果 - MaxSSL

通过@load事件来控制图片的高度

图片[2] - uniapp 小程序实现图片宽度100%、高度自适应的效果 - MaxSSL

话不多说,直接上代码,

data() {return {imgHeight: 0}},methods: { onImgLoad(e) { // 当图片加载完成后,获取图片的原始宽度和高度,并根据宽度计算出高度const { width, height } = e.mp.detail; this.imgHeight = (height / width) * 100; // 高度 = 原始高度 / 原始宽度 * 100},},
.img{width: 100%;}

随手一记~

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享