无法在 Chrome 中获取对象的真实高度/宽度

Question

我有一个问题，如果我在 css 中设置图像高度并尝试获取高度/宽度，我会在不同的浏览器中得到不同的结果。有没有办法在所有浏览器中获得相同的尺寸？

找到一个实例

您可以在此处<-已删除并 这个概念是这样的：

CSS:
img{
  height:100px;
  }

Script:
$(document).ready(function(){
    $("#text").append($("#img_0").attr("height"));
    $("#text").append($("#img_0").attr("width"));
});

输出 Firefox： 图片高度：100 img 宽度：150

输出 Chrome： 图片高度：100 img 宽度：0

输出 Chrome： 图片高度：100 图片宽度：93？

我已经从 StackOverflow 尝试过这个： stackoverflow.com/questions/1873419/jquery-get-height-width

但仍然得到相同的结果

有人知道一个好的解决方案吗？

Answer 1

图像未在 document.ready 中加载，您需要使用 window.load 事件来确保它们存在，如下所示：

$(window).load(function(){
    $("#text").append($("#img_0").height());
    $("#text").append($("#img_0").width());
});

这里快速了解差异 ，重要的部分是图片加载。

Answer 2

Nick Craver 使用 $(window).load() 的答案是正确的，但图像也有一个 load() 方法，它允许更细的粒度，特别是如果可能有多个图像需要加载。

  $(document).ready(function(){ 
    $("#top_img_0").load (function (){
      $("#text").append( "height: " + $("#top_img_0").attr("height")+"<br/>" );
      $("#text").append( "width: " + $("#top_img_0").attr("width")+"<br/>" );   
      }); 
  });

Answer 3

看起来这是一个竞争条件，至少对我使用 Chrome 来说是这样。当您获取尺寸时，图像尚未完成加载。我将所有内容设置为在 200 毫秒超时后触发，并显示实际宽度/高度。

    $(document).ready(function() {
        setTimeout("getImageDimensions()", 200);
    });

    function getImageDimensions() {
        var pic_real_width;
        var pic_real_height;

        $("#topContent img").each(function() {
            var $this = $(this);
            $this.removeAttr("width");
            $this.removeAttr("height");
            $this.css({ width: 'auto', height: 'auto' });

            pic_real_width = $this.width();
            pic_real_height = $this.height();
            $this.css({ width: '', height: '100px' });
        });

        $("#text").append(" height: " + pic_real_height/*$("#top_img_0").attr("height")*/ + "<br/>");
        $("#text").append(" width: " + pic_real_width/*$("#top_img_0").attr("width")*/ + "<br/>");
    }

已在 Chrome、IE 和 Firefox 中测试并运行。全部显示 2008 x 3008。

Answer 4

替换

$this.css({width: '', height: ''}); 

为

$this.css({width: 'auto', height: 'auto'});

Opera 10.10 高度/宽度 2008 x 3008