在 Vue 3 中获取图片元素的宽高:原始尺寸与缩放后尺寸的处理方法

1.获取原始尺寸(不受代码修改大小影响)

originalWidth.value = imageRef.value.naturalWidth;//获取原始宽度

originalHeight.value = imageRef.value.naturalHeight;//获取原始高度

2.当对图片应用了 transform: scale() 进行缩放后,widthheight 属性仍然返回未缩放前的尺寸。为了获取缩放后的实际显示尺寸,可以使用 getBoundingClientRect() 方法,该方法返回元素的大小及其相对于视口的位置,包括应用的 CSS 变换。

// 获取初始显示尺寸

const rect = imageRef.value.getBoundingClientRect();

imageWidth.value = rect.width;//修改后的尺寸

imageHeight.value = rect.height;//修改后的尺寸

 

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

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

相关文章

【Rive】事件回调

1 前言 Android 中可以通过 RiveAnimationView 的 addEventListener 方法添加动画监听器,用于监听状态动画和过渡动画的开始和结束时机,实现动画开始和结束时的事件回调;也可以监听 Rive 事件触发的时机,在事件触发时响应回调。 …

Springboot3整合Redis

书接上篇《Redis 安装篇&#xff08;阿里云服务器&#xff09;_阿里云安装redis-CSDN博客》&#xff0c;安装好Redis后&#xff0c;就需要在springboot项目中使用Redis了。 一、SpringBoot整合Redis 1.添加坐标 <!--redis--> <dependency><groupId>org.sp…

REDMI瞄准游戏赛道,推出小屏平板

近日&#xff0c;REDMI推出了一款8.8英寸的小屏平板&#xff0c;引发市场关注。该平板采用LCD屏幕&#xff0c;搭载天玑9400处理器&#xff0c;定位游戏市场&#xff0c;意在开拓小屏平板的新领域‌。 ‌小屏平板新尝试‌ 这款REDMI平板未追随大屏潮流&#xff0c;而是选择了8…

在Ubuntu上使用docker compose安装N卡GPU的Ollama服务

在现代计算环境中,利用 GPU 进行计算加速变得越来越重要。下面将讲解如何在Ubuntu上使用docker compose安装N卡GPU的Ollama服务。 1、安装 NVIDIA 容器工具 首先,需要确保你的系统已经安装了 NVIDIA 容器工具 nvidia-container-toolkit。这是让 Docker 容器访问 GPU 的关键…

OllyDbg、CE简单介绍

基础知识&#xff1a; 想要破解软件&#xff0c;需要一些基础知识&#xff1a; 文件格式&#xff1a;Windows对应PE、Linux对应ELF、IOS对应Mash-0。文件格式是指操作系统规定的每个段&#xff08;代码段、数据段、堆、栈&#xff09;的大小、顺序等信息。 汇编语言&#xff1…

泷羽sec学习打卡-brupsuite4

声明 学习视频来自B站UP主 泷羽sec,如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都 与本人无关,切莫逾越法律红线,否则后果自负 关于brupsuite的那些事儿-proxy proxyInterceptHTTP history/WebSocket history&#xff08;历史记录&a…

Wallpaper壁纸制作学习记录10

图像准备 外部图像编辑器快速访问 Wallpaper Engine 允许您配置自己喜欢的外部图像编辑器&#xff0c;以用作补充图像编辑工具&#xff0c;您可以在整个编辑器中快速访问该工具。 您可以在Wallpaper Engine 编辑器中配置您选择的图像编辑器&#xff0c;通过顶部的文件菜单&am…

【C++算法】36.位运算_只出现一次的数字 II

文章目录 题目链接&#xff1a;题目描述&#xff1a;解法C 算法代码&#xff1a;解析 题目链接&#xff1a; 137. 只出现一次的数字 II 题目描述&#xff1a; 解法 你必须设计并实现线性时间复杂度的算法且使用常数级空间来解决此问题。说明时间复杂度O(n)&#xff0c;空间复杂…

transformer学习笔记-自注意力机制(1)

自注意力机制&#xff0c;可以说是transformer中最核心的部分之一&#xff0c;注意力机制&#xff0c;主要是在处理序列数据时&#xff0c;根据序列数据提供的上下文环境信息识别需要关注的特征数据&#xff0c;注意力机制通常用于不同序列之间的交互&#xff0c;表示不同序列环…

日志基础示例python和c++

文章目录 0. 引言1. python2. c 0. 引言 本文主要记录python版本和c版本常用的日志基础示例。 1. python python版本常用的是logging库&#xff0c;结合colorlog库&#xff0c;可根据不同日志级别打印不同颜色的日志&#xff0c;为了便于分析问题&#xff0c;还添加了日志保…

TimeXplusplus——提高时间序列数据的可解释性,避免琐解和分布偏移问题的深度学习可解释性的框架

摘要 论文地址&#xff1a;https://arxiv.org/abs/2405.09308 源码地址&#xff1a;https://github.com/zichuan-liu/timexplusplus 信号传输技术的优化对于推动光通信的发展至关重要。本文将详细探讨线路编码技术的目标及其实现方式。线路编码旨在提高带宽和功率效率&#xf…

python爬虫--某房源网站验证码破解

文章目录 使用模块爬取目标验证码技术细节实现成果代码实现使用模块 requests请求模块 lxml数据解析模块 ddddocr光学识别 爬取目标 网站验证码破解思路是统一的,本文以城市列表为例 目标获取城市名以及城市连接,之后获取城市房源信息技术直接替换地址即可 验证码 技术…

TimesFM模型论文内容

全文总结 这篇论文提出了一种基于解码器架构的时间序列预测基础模型TimesFM&#xff0c;旨在通过零样本学习在多种公共数据集上实现接近于监督学习模型的预测精度。 研究背景 研究问题&#xff1a;这篇文章要解决的问题是如何设计一个时间序列基础模型&#xff0c;使其在零样…

文生图模型开源之光!ComfyUI - AuraFlow本地部署教程

一、模型介绍 AuraFlow 是唯一一个真正开源的文生图模型&#xff0c;由Fal团队开源&#xff0c;其代码和权重都放在了 FOSS 许可证下。基于 6.8B 参数优化模型架构&#xff0c;采用最大更新参数化技术&#xff0c;还重新标注数据集提升指令遵循质量。在物体空间和色彩上有优势…

【高中生讲机器学习】28. 集成学习之 Bagging 随机森林!

创建时间&#xff1a;2024-12-09 首发时间&#xff1a;2024-12-09 最后编辑时间&#xff1a;2024-12-09 作者&#xff1a;Geeker_LStar 嘿嘿&#xff0c;你好呀&#xff01;我又来啦~~ 前面我们讲完了集成学习之 Boooooosting&#xff0c;这篇我们来看看集成学习的另一个分支…

双色Hanoi塔问题(hanoi)

双色Hanoi塔问题hanoi C语言实现C实现Java实现Python实现 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 设A、 B、 C是3 个塔座。开始时&#xff0c;在塔座A 上有一叠共n 个圆盘&#xff0c;这些圆盘自下而上&#xff0c;由大到小地叠在一…

微信小程序提交测试版,但是扫描体验版的二维码 显示 页面不存在

检查路径首页是否和我们微信小程序中的首页路径一致。 显然我的不一致。 {"pagePath": "pages/index/index","text": "产品","iconPath": "icons/Group 450.png","selectedIconPath": "/icons/组 …

12月9日IO

1.fread,fwrite实现文件拷贝 #include <myhead.h>int main(int argc, const char *argv[]) {// 打开两个文件FILE *fp fopen("1.txt", "r");FILE *fp1 fopen("2.txt", "w");if (NULL fp || NULL fp1) {perror("fopen&…

【服务器部署应用由http协议切换为https】

文章目录 服务器部署应用由http协议切换为https1. 下载openssl及其配置1.1 下载1.2 无脑下一步即可1.3 环境变量配置1.4 验证配置以及生成证书证书路径 2. nginx配置修改 服务器部署应用由http协议切换为https 1. 下载openssl及其配置 1.1 下载 openssl下载地址 根据系统选择…

如何创建基于udp的客户端和服务端

1.先创建好udpServer.hpp、udpServer.cc、udpClient.hpp、udpClient.cc的框架。 #pragma once #include <string> #include <iostream> #include <sys/types.h> #include <sys/socket.h> #include <unistd.h> #include <cerrno> #include…