确定图像跨浏览器的原始大小？

是否有可靠的，独立于框架的方法来确定<img src='xyz.jpg'>客户端调整大小的物理尺寸？

您有2个选择：

选项1：

删除width和height属性，然后读取offsetWidth和offsetHeight

选项2：

创建一个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不会因为在拍摄时尚未加载任何回报。

图像（至少在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图像对象中，然后检查该对象的width和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);

只需稍微改变一下Gabriel的第二个选项，使其更易于使用：

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();
});