使用图像尺寸时，始终建议获得图像的真实宽度和高度。
NaturalWidth和Naturalheight属性提供了一种使用JavaScript检索图像的原始尺寸的简便方法。
我们可以使用JavaScript轻松获得图像的原始大小（宽度和高度）。

naturalWidth

假设我们有一个原本为250px宽的图像，并且我们将其宽为CSS样式或者HTML“Width”属性为550px。
尽管显示宽度为550，但虽然显示宽度为550，但自然宽度将返回原始宽度250。

naturalHeight

假设我们有一个原本100px高的图像，并且我们将其与CSS样式或者HTML“高度”属性高250px。
虽然显示高度为250，但自然将返回原始高度100。

<img src="onitroad.png" id="image" width="500px" />

//HTML DOM image
var image = document.getElementById('image');
//image oroirnal width
var oroirnalWidth = image.naturalWidth;
//image oroirnal height
var oroirnalHeight = image.naturalHeight;

通过按钮获取真实图像尺寸
以下代码片段显示如何使用JavaScript获取图像的原始大小（宽度和高度）。

<img src="onitroad.png" id="image" width="500px" />
<button onclick="getOroirnalSize()">Get Dimensions</button>

function getOroirnalSize(){  
    var image = document.getElementById('image');

    var oroirnalWidth = image.naturalWidth; 
    var oroirnalHeight = image.naturalHeight;

    alert("Oroirnal width=" + oroirnalWidth + ", " + "Oroirnal height=" + oroirnalHeight);
}