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.rhkb.cn/news/163238.html

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

相关文章

Linux-ssh

文章目录 远程登录服务器配置远程服务器相关信息创建config文件配置config文件 配置密钥登陆先创建密钥配置密钥文件 执行命令scp传文件copy文件copy文件夹配置我们的vim和tmux 远程登录服务器 ssh userhostnameuser:用户名hostname&#xff1a;IP地址或域名 第一次登陆会显示…

SI基础知识:说一说玻纤布规格(如1078)的具体含义,以及等效Dk计算

玻纤布的编织包含经向和纬向两个不同的方向&#xff0c;这些玻璃布并没有被紧密放置在一起&#xff0c;在玻纤布上会有开窗&#xff0c;而且经向开窗和纬向开窗大小不同。 IPC定义了每种玻纤布的编织密度以及所用玻璃丝的规格&#xff0c;如下图所示。 看上面的表格&#xff0c…

会议OA项目-其它页面->自定义组件应用,其它界面的布局

1.自定义组件应用 文档参考:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ //oamin\project.config.json {"description": "项目配置文件","packOptions": {"ignore": [],"include": []},…

ESP32集成开发环境Espressif-IDE安装 – Windows

陈拓 2023/10/15-2023/10/16 1. 概述 Espressif IDE是一个基于Eclipse CDT的集成开发环境&#xff08;IDE&#xff09;&#xff0c;用于使用ESP-IDF框架开发物联网应用程序。这是一个专门为ESP-IDF构建的独立定制IDE。Espressif IDE附带了IDF Eclipse插件、重要的Eclipse CDT插…

基于 KubeSphere 部署 KubeBlocks 实现数据库自由

作者&#xff1a;尹珉&#xff0c; KubeSphere Contributor & Ambassador&#xff0c;KubeSphere 社区用户委员会杭州站站长。 KubeSphere 是什么&#xff1f; KubeSphere 是在 Kubernetes 之上构建的面向云原生应用的分布式操作系统&#xff0c;完全开源&#xff0c;支持…

最新最全网络安全专业毕业设计选题精华汇总-持续更新中

文章目录 0 前言1 网络安全(信息安全)毕设选题推荐2 开题指导3 最后 0 前言 Hi&#xff0c;大家好&#xff0c;随着毕业季的临近&#xff0c;许多同学开始向学长咨询关于选题和开题的问题。在这里&#xff0c;学长分享一些关于网络安全(信息安全)毕业设计选题的内容。 以下为…

插入排序改进 将交换变成赋值语句 优点适用于近乎有序的序列

效果非常的明显 下面给出代码截图 再给出原代码 #include<iostream> #include<string> #include "Student.h" #include "sorttesthelper.h" using namespace std;template<typename T >void selectionSort( T arr[], int n){for(int i…

编程烦恼:为什么我们有时在解决问题时感到“愚蠢”

编程烦恼&#xff1a;为什么我们有时在解决问题时感到“愚蠢” 在编程的旅程中&#xff0c;每个程序员都曾经遇到过一些令人沮丧的时刻。有时&#xff0c;我们在代码中遇到了神秘的bug&#xff0c;我们花了很多时间来排查问题&#xff0c;但却不断失败。然而&#xff0c;令人惊…

Linux磁盘扩容(超详细)

一、第一步VM虚拟机扩容磁盘 首先我们要先关闭虚拟机&#xff0c;然后这个虚拟机不能存在镜像&#xff0c;否则无法进行扩容 提示&#xff1a; 如果想要某个镜像扩容的解决办法&#xff1a; 可以先保存当前镜像&#xff0c;然后在跳转到你想保存的镜像当中&#xff0c;然后对那…

Service Mesh和Kubernetes:加强微服务的通信与安全性

文章目录 什么是Service Mesh&#xff1f;Service Mesh的优势1. 流量控制2. 安全性3. 可观测性 Istio&#xff1a;Service Mesh的领军者流量管理安全性可观测性 Linkerd&#xff1a;轻量级Service Mesh流量管理安全性可观测性 Istio vs. Linkerd实际应用结论 &#x1f388;个人…

基于SpringCloud实现房产销售平台的设计与实现项目【项目源码+论文说明】

摘要 信息技术的发展推动了管理系统的进步&#xff0c;目前各种行业都积极参与管理系统的建设工作。特别是疫情带来的影响&#xff0c;让传统行业逐渐认识到只有通过在线管理才能继续的发展。房产销售平台是为求租者提供房源必备的平台&#xff0c;如何找到一个好的房源是生活…

企业微信设置可信域名

可信域名的验证文件注意一定放在域名所在的根目录下。 以cloud studio为例&#xff0c;工作区新建终端的路径就是域名在的根目录&#xff0c;而不是服务器的根目录

react+ts手写cron表达式转换组件

前言 最近在写的一个分布式调度系统&#xff0c;后端同学需要让我传入cron表达式&#xff0c;给调度接口传参。我去了学习了解了cron表达式的用法&#xff0c;发现有3个通用的表达式刚好符合我们的需求&#xff1a; 需求 每天 xx 的时间&#xff1a; 0 11 20 * * ? 上面是…

Kotlin中的算数运算符

在Kotlin中&#xff0c;我们可以使用各种算术运算符来进行数值计算和操作。下面对这些运算符进行详细描述&#xff0c;并提供示例代码。 正号&#xff08;正数&#xff09;和负号&#xff08;负数&#xff09;&#xff1a; 正号用于表示一个正数&#xff0c;不对数值进行任何…

东方通部署vue项目

在东方通中部署vue项目需要以war 的形式进行部署具体操作步骤如下 1. 正常打包完vue 项目 在其项目目录下创建WEB-INF 文件夹&#xff0c;同时在里面新建一个 rewrite.config 的文件文件具体内容如下&#xff1a; RewriteRule ^/index\.html$ - [L]RewriteCond …

PyQt 问题记录

1.现成的组件不一定线程安全&#xff0c;&#xff08;包括且不限于数据的修改竞争,和一些组件的崩溃 ) 对于PyQt 的线程使用&#xff0c;可能还需要更谨慎些 保存逻辑 QuestionBox("保存/Save")def Save(self):okFlagFalseerrFlagFalseWriteCmd{}for it in self.Mode…

易点易动上线招标管理模块:提升企业高效招标管理的解决方案

在当今竞争激烈的商业环境下&#xff0c;招标管理对于企业的成功至关重要。为了帮助企业实现高效的招标管理&#xff0c;易点易动固定资产管理系统上线了全新的招标管理模块。该模块涵盖了供应商资质审核、采购询价单、重新报价单、招标结果单、招标作废单等功能&#xff0c;为…

vue源码笔记之——响应系统

vue是一种声明式范式编程&#xff0c;使用vue者只需要告诉其想要什么结果&#xff0c;无需关心具体实现&#xff08;vue内部做了&#xff0c;底层是利用命令式范式&#xff09; 1. reactive为什么只能操作对象&#xff0c;对于基本数据类型&#xff0c;需要用ref&#xff1f; …

ATE测试工程师的前景待遇如何?薪资天花板有多高?

在芯片行业&#xff0c;ATE测试工程师扮演着至关重要的角色。 他们不仅需要理解电路和芯片内部的工作原理&#xff0c;还需要利用各种测试工具和方法对芯片进行精确的测试和分析。那么ATE测试工程师前景如何&#xff1f;需要具备哪些技能要求呢&#xff1f; 首先来了解什么是…

计算机基础知识33

进程基础(操作系统中的概念) 进程它是操作系统总最重要的概念&#xff0c;线程也是 进程和线程都是有操作系统来调度使用的&#xff0c;我们程序员是不能控制的 # 进程和程序是两码事、完全不一样 程序&#xff1a;其实一个死的东西、一堆代码就是程序&#xff0c;它也没有生命…