确定图像跨浏览器的原始大小？
在客户端resize的<img src='xyz.jpg'>的物理尺寸是否存在可靠的，独立于框架的方式？
你有2个选项：
选项1：
删除width和height属性并读取offsetWidth和offsetHeight
选项2：
创build一个JavaScript Image对象，设置src ，并读取width和height （甚至不必将其添加到页面中来执行此操作）。
function getImgSize(imgSrc) { var newImg = new Image(); newImg.onload = function() { var height = newImg.height; var width = newImg.width; alert ('The image size is '+width+'*'+height); } newImg.src = imgSrc; // this must be done AFTER setting onload }
Pekka编辑 ：正如在评论中所同意的，我改变了函数在图像的'onload'事件上运行。 否则，大图像， height和width不会返回任何东西，因为图像尚未加载。
图像（至less在Firefox上）有一个naturalWidth / height属性，所以你可以使用img.naturalWidth来获得原始宽度
var img = document.getElementsByTagName("img")[0]; img.onload=function(){ console.log("Width",img.naturalWidth); console.log("Height",img.naturalHeight); }
资源
您可以将图像预加载到JavaScript Image对象中，然后检查该对象的宽度和高度属性。
只是改变一点点加布里埃尔的第二个select，更容易使用：
function getImgSize(imgSrc, callback) { var newImg = new Image(); newImg.onload = function () { if (callback != undefined) callback({width: newImg.width, height: newImg.height}) } newImg.src = imgSrc; }
HTML：
<img id="_temp_circlePic" src="http://localhost/myimage.png" style="width: 100%; height:100%">
示例调用：
getImgSize($("#_temp_circlePic").attr("src"), function (imgSize) { // do what you want with the image's size. var ratio = imgSize.height / $("#_temp_circlePic").height(); });
/* Function to return the DOM object's in crossbrowser style */ function widthCrossBrowser(element) { /* element - DOM element */ /* For FireFox & IE */ if( element.width != undefined && element.width != '' && element.width != 0){ this.width = element.width; } /* For FireFox & IE */ else if(element.clientWidth != undefined && element.clientWidth != '' && element.clientWidth != 0){ this.width = element.clientWidth; } /* For Chrome * FireFox */ else if(element.naturalWidth != undefined && element.naturalWidth != '' && element.naturalWidth != 0){ this.width = element.naturalWidth; } /* For FireFox & IE */ else if(element.offsetWidth != undefined && element.offsetWidth != '' && element.offsetWidth != 0){ this.width = element.offsetWidth; } /* console.info(' widthWidth width:', element.width); console.info(' clntWidth clientWidth:', element.clientWidth); console.info(' natWidth naturalWidth:', element.naturalWidth); console.info(' offstWidth offsetWidth:',element.offsetWidth); console.info(' parseInt(this.width):',parseInt(this.width)); */ return parseInt(this.width); } var elementWidth = widthCrossBrowser(element);
