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

ops/2024/12/12 2:35:12/

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.ppmy.cn/ops/141141.html

相关文章

锐捷网络设备常用命令(交换机、路由器)

因公司办公网络设备转为锐捷产品,特此学习一些锐捷交换机和路由器的相关配置: enable 进入特权模式 configure terminal 进入全局模式 logging on 日志显示(默认) no logging on 关闭日志显示 exit 返回上一层 end 返回到特权模式…

【Linux】文件查找 find grep

文章目录 1. 引言简介Linux文件系统的基本概念为什么文件查找命令在日常使用中非常重要 2. find 命令基本用法常见选项和参数高级用法和技巧实际示例 3. locate 命令如何工作与find命令的区别安装和使用locate实际示例 4. grep 结合文件查找使用grep进行内容查找结合find命令使…

Python实现中国象棋

探索中国象棋 Python 代码实现:从规则逻辑到游戏呈现 中国象棋,这款源远流长的棋类游戏,承载着深厚的文化底蕴与策略智慧。如今,借助 Python 与 Pygame 库,我们能够在数字世界中复刻其魅力,深入探究代码背后…

HIS(医院信息系统)中的大数据

一、定义 HIS是医院信息系统(Hospital Information System) 的缩写。它是利用计算机软硬件技术、网络通信技术等现代化手段,对医院及其个部门的人流、物流、材流进行综合管理,对医疗活动各阶段产生的数据进行采集、存储、处理、提取、传输、…

算法——差分

差分可以看作是前缀和的逆运算,前缀和可以帮我们快速得到某个区间的和,而差分就是我们将原数组看作是一个前缀和数组(q[])我们去构造一个差分数组(c[]) 一维差分 使存在如下关系: q[i] c[1]…

gitlab

一、gitlab 概念 GitLab 是一个用于仓库管理系统的开源项目,使用Git作为代码管理工具,并在此基础上搭建起来的web服务。 b和GitHub一样属于第三方基于Git开发的作品,免费且开源(基于MIT协议),与Github类似…

ansible playbook 使用 script 模块在远程主机上执行脚本

需求一: 要在所有的远程主机上执行一下收集脚本,并在控制台打印出来 脚本如下: [root192 Playbooks]# cat CollectServerInformation.sh #!/bin/bash # Collect server information echo "Collecting server information..."# OS …

Scala 隐式转换

object test {//复习隐式转换://隐式转换:编译器 偷偷地,自动地帮我们把一种数据转换为另一种类型//例如:int --> double//它有失败的时候(double --> int),有成功的时候//当它转换失败的…