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

因为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.mzph.cn/news/106693.shtml

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

相关文章

CentOS 7 服务器上创建新用户及设置用户密码有效期

一、创建用户 1、以 root 用户身份登录到 CentOS 服务器 2、运行以下命令以创建新用户&#xff1a; useradd -m -s /bin/bash username其中&#xff0c;username 是您要创建的新用户的用户名。该命令将创建一个新用户并为其分配一个主目录。3、运行以下命令以设置新用户的密码…

Frame Buffer设备驱动 (ili9488 3.5寸tft屏)

Frame Buffer设备驱动 Frame Buffer设备ili9488介绍驱动编写代码编写ili9488.c设备树修改测试ili9488代码分析 LCD资料下载 Frame Buffer设备 在早期的输出显示设备中&#xff0c;大部分为CRT显示器&#xff0c;随着技术的不断发展&#xff0c;现在大部分使用的是液晶显示器。这…

MySQL视图、用户管理和C语言链接

文章目录 1. 视图1.1 基本使用 2. 用户管理2.1 用户信息2.2 创建用户2.3 修改用户密码2.4 删除用户 3. 数据库的权限3.1 给用户授权3.2 回收权限 4. mysql connect4.1 Connector/C 使用4.2 mysql接口介绍 1. 视图 视图是一个虚拟表&#xff0c;其内容由查询定义。同真实的表一…

百度SEO优化的特点(方式及排名诀窍详解)

百度SEO优化的特点介绍&#xff1a; 百度SEO优化是指对网站进行优化&#xff0c;使其在百度搜索引擎中获得更好的排名&#xff0c;进而获取更多的流量和用户。百度SEO优化的特点是综合性强、效果持久、成本低廉、投资回报高。百度的搜索算法不断更新&#xff0c;所以长期稳定的…

开源任务调度框架

本文主要介绍一下任务调度框架Flowjob的整体结构&#xff0c;以及整体的心路历程。 功能介绍 flowjob主要用于搭建统一的任务调度平台&#xff0c;方便各个业务方进行接入使用。 项目在设计的时候&#xff0c;考虑了扩展性、稳定性、伸缩性等相关问题&#xff0c;可以作为公司…

YOLOv5网络结构图

网络结构图&#xff08;简易版和详细版&#xff09; 网络框架介绍 前言&#xff1a; YOLOv5是一种基于轻量级卷积神经网络&#xff08;CNN&#xff09;的目标检测算法&#xff0c;整体可以分为三个部分&#xff0c; backbone&#xff0c;neck&#xff0c;head。 如上图所示…

C++——多态

多态是有继承关系的类对象调用相同的函数&#xff0c;会有不同的结果。例如&#xff0c;普通人买高铁票不打折&#xff0c;学生打75折&#xff0c;儿童免费&#xff0c;这种情况就适合使用多态 虚函数 被virtual修饰的类成员函数 class A{ public:virtual void fun() {} }; …

【深度学习】深度学习实验四——循环神经网络(RNN)、dataloader、长短期记忆网络(LSTM)、门控循环单元(GRU)、超参数对比

一、实验内容 实验内容包含要进行什么实验,实验的目的是什么,实验用到的算法及其原理的简单介绍。 1.1 循环神经网络 (1)理解序列数据处理方法,补全面向对象编程中的缺失代码,并使用torch自带数据工具将数据封装为dataloader。 (2)分别采用手动方式以及调用接口方式…

Redis--List、Set、Zset、Hash、Bitmaps、HyperLogLog、Geospatial

List LPUSH key value1 [value2] 将一个或多个值插入到列表头部 127.0.0.1:6379> LPUSH myls1 1 (integer) 1 127.0.0.1:6379> LPUSH myls1 2 (integer) 2 127.0.0.1:6379> LRANGE myls1 0 -1 1) "2" 2) "1" LPOP key 移出并获取列表的第一个元素…

【排序算法】详解直接插入排序和希尔排序原理及其性能分析

文章目录 插入排序算法原理细节分析代码实现复杂度分析:稳定性分析:与冒泡排序的对比 希尔排序算法原理细节分析代码实现复杂度分析稳定性分析 总结对比 插入排序 算法原理 插入排序又或者说直接插入排序,是一种和冒泡排序类似的并且比较简单的排序方法&#xff0c; 基本思想…

3、Linux下安装

以下操作仅限于rh系列:支持rpm/yum安装方式&#xff0c;不支持deb/apt安装方式。 以下操作仅限于rh系列&#xff1a;支持rpm/yum安装方式&#xff0c;不支持 deb/apt安装方式。 1、在线下载安装包&#xff1a; wget https://downloads.mysql.com/archives/get/p/23/file/ m…

打造个人专属形象!工业级人物写真生成工具FaceChain开源

简介 FaceChain 是一个可以用来打造个人数字形象的深度学习模型工具。用户仅需要提供最低一张照片即可获得独属于自己的个人形象数字替身。FaceChain 支持在 gradio 的界面中使用模型训练和推理能力&#xff0c;也支持资深开发者使用 python 脚本进行训练推理。 Github链接&…

长短期记忆网络(LSTM)

一. 什么是LSTM Long Short Term Memory&#xff08;LSTM&#xff0c;长短期记忆&#xff09;是一种特殊的递归神经网络。这种网络与一般的前馈神经网络不同&#xff0c;LSTM可以利用时间序列对输入进行分析。 简而言之&#xff0c;当使用前馈神经网络时&#xff0c;神经网络会…

Linux 中如何安全地抹去磁盘数据?

哈喽大家好&#xff0c;我是咸鱼 离过职的小伙伴都知道&#xff0c;离职的时候需要上交公司电脑&#xff0c;但是电脑里面有许多我们的个人信息&#xff08;聊天记录、浏览记录等等&#xff09; 所以我们就需要先把这些信息都删除&#xff0c;确保无法恢复之后才上交 即有些…

MongoDB 索引和常用命令

一、基本常用命令 1.1 案例需求 存放文章评论的数据存放到 MongoDB 中&#xff0c;数据结构参考如下&#xff0c;其中数据库为 articledb&#xff0c; 专栏文章评论 comment 字段名称 字段含义 字段类型 备注 _id ID ObjectId或String Mongo的主键的字段 articlei…

海量数据插入的各种方案试验

海量数据插入的各种方案试验&#xff0c;大家来分析下 前提 源表&#xff1a;一千万条以上记录&#xff0c;54个字段.exp导出文件2.8G以上。 目的表&#xff1a;无索引&#xff0c;空表 试验&#xff1a;A.本地插入。B.跨库插入 初始化 SQL> select count…

怎么团队合作,协作开发

一、代码托管平台 我是在大一下的一个竞赛中接触到的代码托管平台 那个时候我也算是什么都不会的&#xff0c;不过不得不说这个确实比较重要&#xff0c;对我造成了一些冲击 在我看来&#xff0c;代码托管平台的作用就是在一个中转站&#xff08;仓库&#xff09;上存储我们写…

自己在家给电脑重装系统Win10教程

自己在家怎么给电脑重装系统Win10&#xff1f;Win10电脑系统如果操作时间特别长了&#xff0c;就可能出现卡顿、蓝屏等系统问题&#xff0c;这时候用户就想给电脑重装系统&#xff0c;却不知道重装具体的操作步骤&#xff0c;下面小编给大家详细介绍自己在家给电脑重装Win10系统…

IRC/ML:金融智能风控—信贷风控场景简介、两大场景(贷款场景+信用卡场景)、信用卡评分模型设计、反欺诈检测技术的简介、案例应用之详细攻略

IRC/ML:金融智能风控—信贷风控场景简介、两大场景(贷款场景+信用卡场景)、信用卡评分模型设计、反欺诈检测技术的简介、案例应用之详细攻略 目录 信贷风控简介 信贷风控两大场景

Java程序中调用Python脚本(兼容Windows与Linux)

一&#xff0c;说明 想实现如下功能&#xff0c;项目后端架构是Spring Boot&#xff0c;某个功能需要调用Python脚本来实现&#xff0c;调用Python脚本的功能要兼容Windows和Linux&#xff0c;即可以运行在Windows和Linux两种平台上。 二&#xff0c;Java代码 // 定义一个线…