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

作者：2023面试高手 | 2024-04-21 00:13:55

踩

小程序图片高度怎么自适应

因为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%;
}

随手一记~

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/460095