1

いくつかの画像を含むレスポンシブレイアウトがあります。画像がmax-width:100%設定されました。また、CSS または HTML 属性で高さを事前に設定することはできません。そうしないとheight、レスポンシブ レイアウトが小さくなるにつれて画像が歪みます。height: auto;適切にスケーリングするために必要です。

jQueryで画像の高さを計算することは可能ですか? cssまたは高さ属性の設定に依存しています。前述のように、レスポンシブデザインのサイズが変更されたときに画像を歪ませずに設定することはできません.height()。.css('height')

4

3 に答える 3

3

そのコードが呼び出されたときに画像がまだロードされていなかったため、私の問題は最終的にそれで.height()あり、 0を返していました。.css('height')

高さを取得するために、次を実行しました。

$(document).ready(function(){
  $('img.whatever').load(function(){
    console.log($(this).height()); // calculates height correctly after image is loaded.
  });
});
于 2012-09-04T04:03:11.943 に答える
1

あなたはouterHeight（）を使うことができます

http://api.jquery.com/outerHeight/

于 2012-09-04T03:39:09.490 に答える
0

画像クロスブラウザの元のサイズを決定するで述べたように? :

次の 2 つのオプションがあります。

オプション1：

幅と高さの属性を削除し、offsetWidth と offsetHeight を読み取ります

オプション 2:

JavaScript 画像オブジェクトを作成し、src を設定し、幅と高さを読み取ります (これを行うためにページに追加する必要さえありません)。

function getImgSize(imgSrc) {
    var newImg = new Image();

    newImg.onload = function() {
    var height = newImg.height;
    var width = newImg.width;
    alert ('The image size is '+width+'*'+height);
    }

    newImg.src = imgSrc; // this must be done AFTER setting onload

}

私はその解決策があなたのために働くと確信しています.

画像の高さまたは幅を変更するだけで、アスペクト比が歪むことはありません。

于 2012-09-04T06:09:03.353 に答える