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 に答える