首先是元素的innerWidth属性,或者jQuery中的width()方法:
<img id="img" src="1.jpg">
<script type="text/javascript">
var img = document.getElementById("img");
console.log(img.innerWidth); // 600
</script>
但是如果给img元素增加了width属性,比如图片实际宽度是600,设置了width为400。这时候innerWidth为400,而不是600。显然,用innerWidth获取图片原始尺寸是不靠谱的。
这是因为 innerWidth属性获取的是元素盒模型的实际渲染的宽度,而不是图片的原始宽度。
naturalWidth / naturalHeight
HTML5提供了一个新属性naturalWidth/naturalHeight可以直接获取图片的原始宽高。这两个属性在Firefox/Chrome/Safari/Opera及IE9里已经实现。
如下:
var naturalWidth = document.getElementById(‘img’).naturalWidth,
naturalHeight = document.getElementById(‘img’).naturalHeight;