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

随手一记~

相关推荐
麦兜*10 分钟前
【Spring Boot】Spring Boot 4.0 的颠覆性AI特性全景解析,结合智能编码实战案例、底层架构革新及Prompt工程手册
java·人工智能·spring boot·后端·spring·架构
野犬寒鸦19 分钟前
MyBatis-Plus 中使用 Wrapper 自定义 SQL
java·数据库·后端·sql·mybatis
expect7g26 分钟前
Java的DNS缓存问题
java·后端
oioihoii27 分钟前
C++11中的std::minmax与std::minmax_element:原理解析与实战
java·开发语言·c++
karry01301 小时前
高并发导致重复key问题--org.springframework.dao.DuplicateKeyException
java·数据库·ide
全栈凯哥1 小时前
20.缓存问题与解决方案详解教程
java·spring boot·redis·后端·缓存
小莫分享1 小时前
2023年最新总结,阿里,腾讯,百度,美团,头条等技术面试题目,以及答案,专家出题人分析汇总。
java·后端·面试·职场和发展
Brookty1 小时前
【操作系统】线程
java·linux·服务器·后端·学习·java-ee·操作系统
Dovis(誓平步青云)1 小时前
探索飞算 JavaAI 进阶:解锁高效Java开发的新维度
java·开发语言·飞算java
小雪_Snow1 小时前
多态 使用场景
java