Question

我有一组响应页面的图像（即最大宽度设置为100％）。

<div class="exh">
   <img src="#" />
</div>
<div class="exh">
   <img src="#" />
</div>
<div class="exh">
   <img src="#" />
</div>

与

.exh img {
   max-width:100%;
}

如何在调整窗口大小以及加载页面后检索图像的高度？当我使用以下内容时，我的高度为0。

$(".exh img").each(function() {
    var $this = $(this);
    console.log( $this.height() );
});

Answer 1

如果您需要在加载页面时以及调整页面大小时执行此操作，请执行以下操作：

$(document).ready( function() { //Fires when DOM is loaded
    getImageSizes();
    $(window).resize(function() { //Fires when window is resized
        getImageSizes();
    });
});
function getImageSizes() {
    $(".exh img").each(function() {
        var $this = $(this);
        console.log( $this.height() );
    });
}

有关.resize（）的更多信息：http://api.jquery.com/resize/

有关.ready（）的更多信息：http://api.jquery.com/ready/

Answer 2

根据这个答案我给了一个类似的问题：

Why does jQuery.css('width') return different values in different browsers?

.width()或height()是“在DOM中呈现”元素的大小 - 并且为了返回大于0的值，该元素需要完全可用于DOM（aka图像需要满载）

你想要的是：

var myImage= new Image();
myImage.onload=function() { alert(this.height);}
myImage.src= "your/image/url";

简而言之 - 您需要在致电height()

之前保证图片已加载

jQuery获得响应式图像的高度

2 个答案: