标签：客户 new flow src hidden nts 固定 blog alt
如何获取图片的原始尺寸大小？
如下，当给 img 设置一个固定的大小时，要怎样获取图片的原始尺寸呢？
#oImg{
width: 100px;
height: 100px;
}
<img src="images/test.jpg" id="oImg" alt="">
HTML5提供了一个新属性 naturalWidth / naturalHeight 可以直接获取图片的原始宽高。这两个属性在Firefox/Chrome/Safari/Opera及IE9里已经实现。
w = document.getElementByTagName("img").naturalWidth; h = document.getElementsByTagName("img").naturalHeight; console.log(w + ‘ ‘ + h);
打印出来的结果与原始尺寸相符。但有个前提是，必须在图片完全下载到客户端浏览器才能判断。
如果是不支持的版本浏览器，那可以用传统方法判断，如下：
var oImg = document.getElementById("oImg"), w,h; if (oImg.naturalWidth) { // HTML5 browsers w = oImg.naturalWidth; h = oImg.naturalHeight; } else { // IE 6/7/8 var nImg = new Image(); nImg.src = oImg.src; nImg.onload = function () { w = nImg.width; h = nImg.height;
console.log(w + " " + h) } }
此时为什么要加 onload 的原因是，图片可能没加载完成，导致图片的 width 、height 无法获取到。
还有下面一种情况：图片外面有个盒子，且盒子display:none；
.imgbox{ width: 100px; height: 100px; display: none; } <div class="imgbox"> <img src="images/test.jpg" id="oImg" alt=""> </div>
嫌创建 new Image（） 麻烦，就想到另外一种方法。
var oImg = document.getElementById("oImg"), w,h; if (oImg.naturalWidth) { // HTML5 browsers w = oImg.naturalWidth; h = oImg.naturalHeight; } else { // IE 6/7/8 w = oImg.width; h = oImg.height; } console.log(w + " " + h)
但这种方法，在ie8 下是获取不到 img width / height 的。此时，我们要对 imgbox 做下处理。
.imgbox{ width: 0; overflow: hidden; }
现在就可以兼容 ie8 了。
标签：客户 new flow src hidden nts 固定 blog alt
原文地址：http://www.cnblogs.com/intangible/p/7202317.html
