1

ページの最後に画像を追加し、その高さと幅を取得し、これらの値を使用して、ページ上の別の画像の高さ/幅を計算しようとしています（これはオンラインの数式エディター用です。 mビル）。

CSSで高さを設定していますが、幅を自動的に拡大縮小したいと思っています。jqueryでこれを行う必要がありますか、それともブラウザが自動的にこれを行いますか？

これが私がやろうとしているタイプの例です。

$( 'body' ).append( '<img class="letter" src="my_image.png">' );
var new_element_height = $('.letter').last().outerHeight();
var new_element_width = $('.letter').last().outerWidth();
$('.letter').last().remove();
alert( new_element_height );
alert( new_element_width );

私のCSSは次のようなものです。

.letter {
    height: 50px;
}

new_element_heightは私に50pxを与え、new_element_widthは私に0pxを与えます。これは、これらの画像を動的に読み込んでから、高さ/幅を取得しようとしているためだと思います。

高さを50pxにし、幅をその高さに正しくスケーリングしてから、それらの値をnew_element_height/new_element_width変数に配置します。

4

1 に答える 1

3

画像が読み込まれる前に画像のサイズを取得しようとしているようです。JavaScriptを参照してください：画像が完全に読み込まれるタイミングを知る

動作するデモについては、http：//jsfiddle.net/eBrnu/2/を確認してください。高さをさまざまな値に設定してみると、幅も変化することがわかります。

visibility: hiddenまた、画像がちらつくことなく、スペースを占有するように、少なくともCSSで設定することをお勧めします。

于 2012-08-20T03:07:32.607 に答える