因为image组件默认是有宽度跟高度的,所以这个高度不怎么好写
通过@load事件来控制图片的高度
话不多说,直接上代码,
<image class="img" src="@/static/image.png" :style="{ height: imgHeight + 'px' }"mode="widthFix" @load="onImgLoad">
</image>
data() {return {imgHeight: 0}
},
methods: {onImgLoad(e) {// 当图片加载完成后,获取图片的原始宽度和高度,并根据宽度计算出高度const { width, height } = e.mp.detail;this.imgHeight = (height / width) * 100; // 高度 = 原始高度 / 原始宽度 * 100},
},
.img{width: 100%;
}
随手一记~