親の幅に合わせて画像のサイズを変更するjQuery

Question

親要素の幅、特にテーブルにある画像に合わせて画像を拡大/縮小しようとしています。

問題は、ブラウザとプラットフォームによって、親要素の幅を決定する際の動作が異なるように見えることです。

だから私は$(document).readyで親td要素の幅を取得しようとしました：

$('td').each(function() { 
    var width = $(this).width(); 
    $(this).width(width); 
}); 

そして（画像をロードする必要があります） $(window).loadに私はに応じて、画像の幅を設定しようtdの幅CSSスタイル：

var parentWidth = $(this).parent().width(); 
if ($(this).closest('td')) { 
    parentWidth = $(this).closest('td').css('width').replace('px', ''); 
} 

しかし、これは信頼できないようです。ときどき動作し、一部のブラウザでは動作しますが、時には悲惨に失敗し、tdの幅に間違った値を与えます。

画像がロードされる前に、画像を拡大すると画像の幅が歪まないように、tdの幅を取得したいと考えています。

もちろん、IE8以降ではmax-widthとmax-heightはサポートされていないが、そうでない場合は必要ありませんでした。

イメージを読み込む前に、これを行い親の幅を取得するにはどうすればよいですか？

BTW：tdは、100％幅のテーブルで開始する幅のパーセント値を持つことができます。

Answer 1

この行が正しくありません：

if ($(this).closest('td')) 

最も近いは、0又は1要素にjQueryオブジェクトを返します。

if ($(this).closest('td').length == 1) 

Answer 2

caniuse.comによれば、IE 7とIE 8は、実際には最大高さと最大幅をサポートしています。それはできないIE6だけです（そして、あなたの目的に合ったいくつかの回避策や、IEの動作バージョンを作るために必要なコードをサンドボックスに使用できるIEの条件付きコメントがあります）。

画像にCSSでwidth: 100%;を使用してみましたか？すべてのブラウザで動作するはずですが、ロード時に親要素の幅を設定している限り、JavaScriptの必要はありません（ロード後の幅を変更する場合は、画像のサイズを「リフレッシュ」するためのJavaScriptはほとんどありませんが、これはあなたが今やっていることよりもはるかに少ないはずです）。