无法在chrome中获得对象的真实高度/宽度 [英] can't get true height/width of object in chrome

问题描述

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

您可以找到一个实例 here < -Removed

概念如下：

  CSS：
 img {
 height：100px; 
 
 
 
 $（document）.ready（function（）{
 $（＃text）。append（$（＃img_0 ）.attr（height））; 
 $（＃text）。append（$（＃img_0）。attr（width））; 
}）; 
  

输出Firefox：
img height：100
img width：150 输出Chrome：输出Chrome：
img高度：100
img宽度：0

img height：100
img width：93？

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

但仍然得到相同的结果任何人都知道一个好的解决方案？

解决方案

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

  $（window）.load（function（）{
 $（＃text）。append（$（＃img_0）。height（））; 
 $ （#text）。append（$（＃img_0）。width（））; 
}）; b 
 
 
 $ b 
文件准备和窗口加载在jquery /rel =noreferrer>这里有一个快速阅读差异，重要的部分是图片加载。
 
I have a question, if i set a image height in css and try to get height/width i get different results in different browsers. Is there a way to get the same dimension in all browsers?

You can find a live example here<-Removed

and the concept is like this:
CSS:
img{
  height:100px;
  }

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

Output Chrome:
img height: 100
img width: 0

Output Chrome:
img height: 100
img width: 93?

i have tried this from StackOverflow:
stackoverflow.com/questions/1873419/jquery-get-height-width

but still get the same result

Any one know a good solution?
解决方案
The images aren't loaded in document.ready, you need to use the window.load event to make sure they're present, like this:
$(window).load(function(){
    $("#text").append($("#img_0").height());
    $("#text").append($("#img_0").width());
});
Here's a quick read on the difference, the important part is that pictures are loaded.

                        
这篇关于无法在chrome中获得对象的真实高度/宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！