image.png
问题描述
公司项目需要做多端小程序，由于抖音小程序的图片组件mode属性不支持heightFix，于是只能自己做兼容。
原理解析：
是利用image组件@load加载完成事件获取图片原来的宽高计算出图片宽高比，由此动态计算图片宽度
实现代码
具体自行看注释
html 部分
<image
src="图片地址"
:style="{width: imgWidth + 'px',height: imgHeight+ 'rpx'}"
@load="imageLoad"
mode="heightFix"
></image>
js 部分
data () {
return {
imgWidth: 0, // 图片宽度（单位：px）
imgHeight: 58, // 图片高度 （单位：rpx）
}
},
methods: {
imageLoad(e) {
//获取图片真实宽度
let imgwidth = e.detail.width,
imgheight = e.detail.height,
ratio = imgwidth / imgheight // 宽高比
// 计算公式：图片宽度 = 图片宽高比 * 图片高度，并保留3位小数，
// 因获取的图片真实宽度为px，而高度我用的rpx单位，所以图片高度使用时要换算成px
this.imgWidth = Number((ratio * this.imgHeight / 750 * uni.getSystemInfoSync().windowWidth).toFixed(3))
},
}
