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

随手一记~

相关推荐
凭君语未可4 分钟前
深度解析Java的多态特性
java·开发语言
2501_9151063210 分钟前
iOS 打包 IPA 全流程详解,签名配置、工具选择与跨平台上传实战指南
android·macos·ios·小程序·uni-app·cocoa·iphone
00后程序员张17 分钟前
iOS 混淆实操指南多工具组合实现 IPA 混淆、加固与发布治理 IPA 加固
android·ios·小程序·https·uni-app·iphone·webview
华仔啊36 分钟前
JVM参数到底配在哪?7大场景全解,新手不再迷茫!
java·jvm
penguin_bark2 小时前
C++ 异步编程(future、promise、packaged_task、async)
java·开发语言·c++
又是忙碌的一天2 小时前
Java基础 与运算
java·开发语言
程序猫.2 小时前
学生管理系统
java·1024程序员节
m0_748241232 小时前
Java注解与反射实现日志与校验
java·开发语言·python
一成码农2 小时前
3w字一文讲透Java IO
java·开发语言
木易 士心3 小时前
MyBatis 与 Spring Data JPA 核心对比:选型指南与最佳实践
java·spring·1024程序员节