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

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

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

话不多说,直接上代码,

html 复制代码
<image 
	class="img" 
	src="@/static/image.png" 
	:style="{ height: imgHeight + 'px' }"
	mode="widthFix" 
	@load="onImgLoad">
</image>
javascript 复制代码
data() {
	return {
		imgHeight: 0
	}
},
methods: {
	 onImgLoad(e) {
	     // 当图片加载完成后,获取图片的原始宽度和高度,并根据宽度计算出高度
	    const { width, height } = e.mp.detail;
	     this.imgHeight = (height / width) * 100; // 高度 = 原始高度 / 原始宽度 * 100
	},
},
css 复制代码
.img{
	width: 100%;
}

随手一记~

相关推荐
RainbowSea8 小时前
12. LangChain4j + 向量数据库操作详细说明
java·langchain·ai编程
RainbowSea8 小时前
11. LangChain4j + Tools(Function Calling)的使用详细说明
java·langchain·ai编程
考虑考虑12 小时前
Jpa使用union all
java·spring boot·后端
用户37215742613512 小时前
Java 实现 Excel 与 TXT 文本高效互转
java
浮游本尊13 小时前
Java学习第22天 - 云原生与容器化
java
渣哥15 小时前
原来 Java 里线程安全集合有这么多种
java
间彧15 小时前
Spring Boot集成Spring Security完整指南
java
间彧16 小时前
Spring Secutiy基本原理及工作流程
java
Java水解17 小时前
JAVA经典面试题附答案(持续更新版)
java·后端·面试
洛小豆19 小时前
在Java中,Integer.parseInt和Integer.valueOf有什么区别
java·后端·面试