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

随手一记~

相关推荐
lllsure几秒前
【Docker】镜像
java·spring cloud·docker
zhysunny3 分钟前
51.不可变基础设施:云原生时代的「乐高城堡」建造法
java·云原生
无名客010 分钟前
SQL语句执行时间太慢,有什么优化措施?以及衍生的相关问题
java·数据库·sql·sql语句优化
风槐啊15 分钟前
邪修实战系列(3)
java·ide·spring boot·spring·tomcat
咋吃都不胖lyh19 分钟前
SQL数据分析原代码--创建表与简单查询
java·数据库·sql
毕设源码-朱学姐21 分钟前
【开题答辩全过程】以 _基于SpringBoot技术的“树洞”心理咨询服务平台的设计与实现为例,包含答辩的问题和答案
java·spring boot·后端
boonya29 分钟前
Java内存模型与线程私有共享区域与直接内存的理解
java·开发语言·内存模型
axban40 分钟前
QT M/V架构开发实战:QAbstractItemModel介绍
java·数据库·qt
哈喽姥爷1 小时前
Spring Boot--yml配置信息书写和获取
java·数据库·spring boot·mybatis
LeaderSheepH1 小时前
Java自定义比较器详解
java·开发语言