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

随手一记~

相关推荐
一只叫煤球的猫14 分钟前
【🤣离谱整活】我写了一篇程序员掉进 Java 异世界的短篇小说
java·后端·程序员
qq_4244091915 分钟前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
2501_9159184117 分钟前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
斐波娜娜19 分钟前
Maven详解
java·开发语言·maven
Bug退退退12322 分钟前
RabbitMQ 高级特性之事务
java·分布式·spring·rabbitmq
程序员秘密基地26 分钟前
基于html,css,vue,vscode,idea,,java,springboot,mysql数据库,在线旅游,景点管理系统
java·spring boot·mysql·spring·web3
皮皮林55138 分钟前
自从用了CheckStyle插件,代码写的越来越规范了....
java
小码氓42 分钟前
Java填充Word模板
java·开发语言·spring·word
会飞的天明43 分钟前
Java 导出word 实现饼状图导出--可编辑数据
java·word
Muxiyale1 小时前
使用spring发送邮件,部署ECS服务器
java·服务器·spring