在使用真实图像大小之前，您应该加载源图像。如果使用jQuery框架，可以以简单的方式获得真实图像大小。

$("ImageID").load(function(){
  console.log($(this).width() + "x" + $(this).height())
})

你只能使用load事件的回调来做到这一点，因为图像的大小直到它实际完成加载才知道。类似于下面的代码……

var imgTesting = new Image();

function CreateDelegate(contextObject, delegateMethod)
{
    return function()
    {
        return delegateMethod.apply(contextObject, arguments);
    }
}

function imgTesting_onload()
{
    alert(this.width + " by " + this.height);
}


imgTesting.onload = CreateDelegate(imgTesting, imgTesting_onload);
imgTesting.src = 'yourimage.jpg';

让我们将在这里学到的所有内容组合成一个简单的函数(imageDimensions())。它使用承诺。

// helper to get dimensions of an image const imageDimensions = file => new Promise((resolve, reject) => { const img = new Image() // the following handler will fire after a successful loading of the image img.onload = () => { const { naturalWidth: width, naturalHeight: height } = img resolve({ width, height }) } // and this handler will fire if there was an error with the image (like if it's not really an image or a corrupted one) img.onerror = () => { reject('There was some problem with the image.') } img.src = URL.createObjectURL(file) }) // here's how to use the helper const getInfo = async ({ target: { files } }) => { const [file] = files try { const dimensions = await imageDimensions(file) console.info(dimensions) } catch(error) { console.error(error) } } <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script> Select an image: <input type="file" onchange="getInfo(event)" /> <br /> <small>It works offline.</small>

我认为，使用clientWidth和clientHeight已经过时了。

我用HTML5做了一些实验，看看哪些值实际上会被返回。

首先，我使用了一个名为Dash的程序来获得图像API的概述。

它声明了高度和宽度是图像的渲染高度/宽度，而naturalHeight和naturalWidth是图像的固有高度/宽度(仅适用于HTML5)。

我使用了一个高300，宽400的文件中一个美丽的蝴蝶的图像。下面是JavaScript代码:

var img = document.getElementById("img1");

console.log(img.height,           img.width);
console.log(img.naturalHeight,    img.naturalWidth);
console.log($("#img1").height(),  $("#img1").width());

然后我使用这个HTML，内联CSS的高度和宽度。

<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

结果:

/* Image element */ height == 300         width == 400
             naturalHeight == 300  naturalWidth == 400
/* jQuery */      height() == 120       width() == 150

/* Actual rendered size */    120                  150

然后我将HTML更改为以下内容:

<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />

也就是说，使用高度和宽度属性而不是内联样式。

结果:

/* Image element */ height ==  90         width == 115
             naturalHeight == 300  naturalWidth == 400
/* jQuery */      height() ==  90       width() == 115

/* Actual rendered size */     90                  115

然后我将HTML更改为以下内容:

<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

也就是说，同时使用属性和CSS来查看哪个优先级。

结果:

/* Image element */ height ==  90         width == 115
             naturalHeight == 300  naturalWidth == 400
/* jQuery */      height() == 120       width() == 150

/* Actual rendered size */    120                  150

使用jQuery，你可以这样做:

var imgWidth = $("#imgIDWhatever").width();

假设，我们想要得到<img id="an-img" src"…" >

// Query after all the elements on the page have loaded.
// Or, use `onload` on a particular element to check if it is loaded.
document.addEventListener('DOMContentLoaded', function () {
  var el = document.getElementById("an-img");

  console.log({
    "naturalWidth": el.naturalWidth, // Only on HTMLImageElement
    "naturalHeight": el.naturalHeight, // Only on HTMLImageElement
    "offsetWidth": el.offsetWidth,
    "offsetHeight": el.offsetHeight
  });
})

自然维度

埃尔。naturalWidth和el。naturalHeight会得到图像文件的自然尺寸。

布局尺寸

埃尔。offsetWidth和el。offsetHeight将为我们提供元素在文档上呈现的尺寸。