用JavaScript获取图片真实尺寸大小的简单方法

      随着智能手机等小屏移动设备的兴起，以前只针对桌面电脑的网站必不可少的向自适应网站页面模式迁移，而在这其中，

max-width

这个新的CSS属性在自适应设计中占有举足轻重的作用。我通常都是将

img

, 

iframe

, 和 

embed

 等标签设置成 

max-width: 100%

，这样，它们的尺寸就会跟随它们的父元素一样扩展和收缩，就能自适应各种平面尺寸/分辨率的移动设备了。

但最近我发现了一个问题，就是当采取自适应技术后，图片在页面上表现的尺寸大小往往不是它们的真实大小，那么，如果我想获取页面上一个图片的真实长度宽度，该怎么办呢？最近偶然在MDN上发现了一个从未听说的新属性，正好能帮我解决这个问题！

JavaScript代码

使用JavaScript，我们能获取一个图片的真实宽度和高度：

myImage.addEventListener('onload', function() {
	console.log('我的宽度是: ', this.naturalWidth);
	console.log('我的高度是: ', this.naturalHeight);
});

还是第一次看见

naturalWidth

 和 

naturalHeight

这两个只读属性，真是两个非常有用的属性。不论你如何用CSS来变换一个

img

元素的高度和宽度，图片的原始大小都能用它们获取到。需要提醒的一点是，你不需要等待图片成功加载到页面后，才能正确的访问这两个属性，所以放到了

onload

事件里。

转载请注明：前端录»用JavaScript获取图片真实尺寸大小的简单方法

<script src="http://www.wozhuye.com/index.php?m=digg&c=index&a=init&id=20-313-2"></script>