Question

我有一个图片标记：

HTML code：

<img src="image.jpg"></img>

CSS代码：

img
{  
   max-width: 100%;
   max-height: 100%; 
}

我只是想知道它的实际高度和宽度（以像素为单位）（内存中的大小），如果它的宽度和高度设置为自动。如何在javascript中做到这一点？

Answer 1

一种方法就是这样做。这样您就可以获得DOM元素的当前高度和宽度。

<img id="someId" src="image.jpg"></img>

var imageElement = document.getElementById('someId'); 
var height = imageElement.clientHeight;
var width = imageElement.clientWidth;

Answer 2

clientWidth和clientHeight是DOM属性，显示DOM元素内部维度的当前浏览器内大小（不包括边距和边框）。因此，对于img元素，这将获得可见图像的实际尺寸。

var img = document.getElementById('imageid');
 //or however you get a handle to the IMG
 var width = img.clientWidth;
 var height = img.clientHeight;

Answer 3

您可以使用JavaScript来收集元素

用于身高 document.querySelector('img').offsetHeight;

用于宽度 document.querySelector('img').offsetWidth;

通常人们会在元素上设置id或class，以便轻松抓取它。

像这样 <img class='image' src='image.jpg'></img>

现在您可以通过其类名

获取元素

document.querySelector('.image').offsetHeight;

在磁盘中获取图像的实际高度和宽度文件大小

3 个答案: