主页 / coding / 问题 / 79201515
Accepted
Mike
Asked: 2024-11-19 05:41:57 +0800 CST

根据 JavaScript，缩放后的图像不会有不同的大小

  • 772

有没有办法通过 javascript 获取缩放图像的实际大小？在向图像添加 css 缩放效果，然后通过 JS 获取大小后，它会返回原始大小。

var img = document.getElementById('img');
var box = document.getElementById('box')

box.innerHTML += "<br />height: " 
    + img.height +
    "px<br />width: "
    + img.width + "px";
#img{zoom:20%}
<div id="box">
  <img id="img" src="https://tse2.mm.bing.net/th/id/OIP.Lt_KplHna5Rxc5JdcOAXuQHaHa?rs=1&pid=ImgDetMain" />
</div>

https://codepen.io/tinkersncody/pen/dyxENwq

javascript

1 个回答

  1. Best Answer

    您可以使用getBoundingClientRect()方法：

    var img = document.getElementById('img');
var box = document.getElementById('box')

img.onload = () => {
  box.innerHTML += "<br />height: " 
    + img.getBoundingClientRect().height
    + "px<br />width: "
    + img.getBoundingClientRect().width
    + "px";
}
    #img{zoom:20%}
    <div id="box">
  <img id="img" src="https://tse2.mm.bing.net/th/id/OIP.Lt_KplHna5Rxc5JdcOAXuQHaHa?rs=1&pid=ImgDetMain" />
</div>

    img.onload = () => {...}添加是为了确保在获取值之前加载图像。

    • 2

相关问题