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

news2024/11/24 12:59:47

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

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

话不多说,直接上代码, 

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

随手一记~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1091900.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【linux】E45: ‘readonly‘ option is set (add ! to override)

vim 编辑文件保存时 E45:设置了“只读”选项&#xff08;添加&#xff01;以覆盖&#xff09; 输入&#xff1a; wq! 提示 "/etc/my.cnf" E212: Cant open file for writing 依然是没有权限&#xff1a; 解决一&#xff1a; 切换用户&#xff1a; su root 解…

Elastic Cloud v.s. Zilliz Cloud:性能大比拼

Elastic Cloud v.s. Zilliz Cloud:性能大比拼 Zilliz 经常会收到来自开发者和架构师的提问:“Zilliz Cloud 和 Elastic Cloud 比起来,谁进行向量处理能力比较强?” 诸如此类的问题很多,究其根本,大都是开发者/架构师在为语义相似性检索系统进行数据库选型时缺少决策依据有…

网络层:常见的面试题和答案

1、什么是IPv4和IPv6&#xff1f;它们有什么区别&#xff1f; 答&#xff1a;IPv4是32位的IP地址格式&#xff0c;而IPv6是128位的IP地址格式。IPv4地址空间有限&#xff0c;而IPv6地址空间更大&#xff0c;可以提供更多的地址。 2、说说 HTTP 和HTTPS 的区别&#xff1f; H…

【C++】适配器模式 - - stack/queue/deque

目录 一、适配器模式 1.1迭代器模式 1.2适配器模式 二、stack 2.1stack 的介绍和使用 2.2stack的模拟实现 三、queue 3.1queue的介绍和使用 3.2queue的模拟实现 四、deque&#xff08;不满足先进先出&#xff0c;和队列无关&#xff09; 4.1deque的原理介绍 4.2dequ…

基于matomo实现业务数据埋点采集上报

matomo是一款Google-analytics数据埋点采集上报的平替方案&#xff0c;可保护您的数据和客户的隐私&#xff1b;正如它官网的slogan: Google Analytics alternative that protects your data and your customers privacy; 该项目源码开源免费&#xff0c;支持私有化部署&#x…

零基础Linux_17(进程间通信)VSCode环境安装+进程间通信介绍+pipe管道mkfifo

目录 1. VSCode环境安装 1.1 使用VSCode 1.2 远程链接到Linux机器 1.3 VSCode调试 2. 进程间通讯介绍 2.1 进程间通讯的概念和意义 2.2 进程间通讯的策略和本质 3. 管道 3.1 管道介绍 3.2 匿名管道介绍 3.3 匿名管道示例代码 3.3.1 建立管道的pipe 3.3.2 匿名管道…

YOLOv5算法改进(10)— 如何去添加多层注意力机制(包括代码+添加步骤+网络结构图)

前言:Hello大家好,我是小哥谈。注意力机制是近年来深度学习领域内的研究热点,可以帮助模型更好地关注重要的特征,从而提高模型的性能。注意力机制可被应用于模型的不同层级,以便更好地捕捉图像中的细节和特征,这种模型在计算资源有限的情况下,可以实现更好的性能和效率。…

二十一、【文本工具组】

文章目录 横排文本工具字符选项卡段落文字 横排文本工具 需要注意的是一些不是免费的商业字体&#xff0c;一定不要拿去使用&#xff0c;否则后边很容易会受到法律索赔。 在制作海报等一些图形时&#xff0c;需要经常用到文本工具我们需要对文本进行变形&#xff0c;分段&…

Qt开发工程师成系统性长体系教程

QT跨平台开发工程师必备技术栈 基础原理-案例分析-项目实战&#xff0c;紧跟QT开发岗位技术需求. 一、Qt C 语言编程基础专栏 1.1 Qt C 语言编程基础 Visual Studio 2022安装C语言基础概述C指针与引用C类与对象(一)C类与对象(二)类的基它特性构造函数&析构函数&拷贝…

rhel8 nmcli学习

25.3.1 配置动态IP连接 25.3.1.1 配置IP 要使用 DHCP 分配网络时&#xff0c;可以使用动态IP配置添加网络配置文件&#xff0c;命令格式如下&#xff1a; # nmcli connection add type ethernet con-name connection-name ifname interface-name 例如创建名为net-test的动态…

虚拟机的发展史:从分时系统到容器化

一、前世 早期计算机的价格非常昂贵&#xff0c;一台计算机可能需要花费几十万甚至上百万美元。例如&#xff0c;ENIAC计算机&#xff0c;作为世界上第一台通用电子数字计算机&#xff0c;当时的造价约为48万美元。科学家或者工程师们需要计算机的能力&#xff0c;但是买不起整…

C. JoyboardCodeforces Round 902

C. Joyboard 样例1列表找规律&#xff1a; #include<iostream> #define int long long using namespace std; signed main() {int T;cin>>T;while(T--){int n,m,k;cin>>n>>m>>k;if(k1){cout<<1<<endl;}else if(k2){cout<<m…

vue2时间处理插件——dayjs

在vue时间处理上有很多的方法和实现&#xff0c;可以自己实现&#xff0c;但是效率不高&#xff0c;所以&#xff0c;在框架开发中我们一般不会手写&#xff0c;一般是使用集成的第三方插件来解决我们的问题&#xff0c;在vue3中大家一般都使用Moment.js来处理&#xff0c;所以…

Defects4j数据集安装及使用

一、Defects4j数据集安装 在Ubuntu系统上进行操作&#xff0c;具体的在&#xff1a;Defects4j数据集安装 二、Defects4j数据集的使用 1. 常用命令 Getting started ---------------- #### Setting up Defects4J 1. Clone Defects4J:- git clone https://github.com/rjust/d…

JOSEF约瑟 可调漏电继电器RT-LB230KS+Q-FL-100 导轨安装 配套零序互感器

一、产品用途及特点 RT-LB230KS漏电继电器&#xff08;以下简称继电器&#xff09;适用于交流电压为660V.至1140V电压系统中,频率为50Hz,电流15~4000A线路中做有无中性点漏电保护. 该继电器可与带分励脱扣器或失压脱扣器的断路器、交流接触器、磁力启动器等组成漏电保护装置&…

【ELK 使用指南】ELK + Filebeat 分布式日志管理平台部署

ELK和EFLK 一、前言1.1 日志分析的作用1.2 需要收集的日志1.3 完整日志系统的基本特征 二、ELK概述2.1 ELK简介2.2 为什么要用ELK?2.3 ELK的组件 三、ELK组件详解3.1 Logstash3.1.1 简介3.1.2 Logstash命令常用选项3.1.3 Logstash 的输入和输出流3.1.4 Logstash配置文件 3.2 E…

端到端的机器学习项目(Machine Learning 研习之六)

使用真实数据 当你在研习机器学习时&#xff0c;最好是使用真实世界中的数据&#xff0c;而不是采用人工数据。巧的是&#xff0c;数以千计的数据集可供选择&#xff0c;涵盖了各种领域。 流行的开放数据存储库&#xff1a; OpenML.orgKaggle.compaperswithcode.com UC Irvin…

阿里云服务器不能访问网络之安装mysql 提示连接超时

wget -i -c http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm 过了一段时间后提示 fail .......time out 链接超时 有可能你的服务器不能访问网络 因为宽带套餐 我购买的时候没有购 重新购买就行了

python爬取boss直聘数据(selenium+xpath)

文章目录 一、主要目标二、开发环境三、selenium安装和驱动下载四、主要思路五、代码展示和说明1、导入相关库2、启动浏览器3、搜索框定位创建csv文件招聘页面数据解析(XPATH)总代码效果展示 六、总结 一、主要目标 以boss直聘为目标网站&#xff0c;主要目的是爬取下图中的所…

【Candence报错】Discrepancy #i in TASK

问题描述 Candence LVS仿真提示网络不匹配 问题解决 检查原理图和Layout 注意&#xff1a;