1

我有一组响应页面的图像（即 max-width 设置为 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() );
});
4

2 回答 2

5

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

$(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/

于 2012-05-02T22:17:38.767 回答
2

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

为什么 jQuery.css('width') 在不同的浏览器中返回不同的值？

.width()或者height()是元素的“在 DOM 中渲染”的大小 - 要返回大于 0 的值，该元素需要对 DOM 完全可用（也就是图像需要完全加载）

你想要的是：

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

简而言之-您需要在调用之前保证图像已加载height()

于 2012-05-02T22:17:21.507 回答