如何获取位于隐藏容器中的 img 标签的高度和宽度答案

【问题标题】：How to get height & width of a img tag residing in a hidden container如何获取位于隐藏容器中的 img 标签的高度和宽度
【发布时间】：2015-06-18 08:07:34
【问题描述】：

我在一个隐藏的 div 中有一个 img 标签，但是当我尝试获取该 img 标签的高度和宽度时，它给出 0 - 0。

这是我的html

<div style="display:none">
  <img id="image" src="https://igcdn-photos-h-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-15/11357782_1454910574825551_630646141_n.jpg">
</div>

获取高度和宽度的jQuery

$(document).ready(function(){
  height = $('#image').height();
  width = $('#image').width();
  alert('Height: '+height+' Width: '+width);
});

CSS

#image {height:200px; width:300px;}

我想获得 200 作为高度和 300 作为宽度，我可以通过获取元素的 css 来做到这一点，但 #image 的高度和宽度不会是静态的，它将是百分比，为此我需要在运行时获取高度和宽度，而不显示图像标签容器。

请帮助我。谢谢

【问题讨论】：

标签： jquery html

【解决方案1】：

另一种解决方法，使用 jQuery：

$(function(){
    var $target = $('#image');
    $target.parent().show();
    $target.hide().on('load', function(){
        alert( $(this).width() + ', ' + $(this).height() );
        $(this).parent().hide();
        $(this).show();
    });
});

Check jsFiddle

【讨论】：

用这个 html 试试
lorempixel.com/400/200" />
不行。
感谢您的回答，它也有效，但这与@Praveen 给出的答案相同
不客气。是的，好吧，我尝试编写一小段代码，但您的要求使其（几乎）成为相同的答案。没有很多方法可以做到这一点。

【解决方案2】：

您可能需要使用 jQuery 方式来 FOUC 几秒钟！如果你没问题，你可以使用这个：

$(function () {
  $("#get-image-size").show();
  a = {
    height: $("#get-image-size img").height(),
    width: $("#get-image-size img").width()
  };
  $("#get-image-size").hide();
  $("body").append(JSON.stringify(a));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="get-image-size" style="display: none;">
  <img id="image" src="https://igcdn-photos-h-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-15/11357782_1454910574825551_630646141_n.jpg" />
</div>

或者你可以在纯JavaScript中使用new Image()方式：

<div id="img"></div>
<script>
  var img = new Image();
  img.src = "https://igcdn-photos-h-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-15/11357782_1454910574825551_630646141_n.jpg";
  img.onload = function () {
    document.getElementById("img").innerHTML = '{"height": ' + this.height + ',"width": ' + this.width + '}';
  };
</script>

【讨论】：

【解决方案3】：

你可以在Image对象中加载你的img src

$(document).ready(function () {
    var img = new Image();
    img.src = $('#image').prop('src');
    img.onload = function () {
        alert("height: " + this.height + " width:" + this.width);
    };
});

DEMO

【讨论】：

我不是在寻找实际的高度和宽度，我在寻找图像标签的高度和宽度。
@RohitKhatri，然后继续回答 praveen