17

サムネイルでいっぱいのページがあり、cssでサイズ変更されてい150x150ます。サムネイルをクリックすると、ページが暗くなり、画像が実際のサイズで表示されます。

現在、すべての画像の実際の高さを含む配列を手動で作成する必要があります。デザインの問題を解決するために、ギャラリーの手動操作を減らすには、サイズを変更した後の画像の実際の高さを取得する必要があります（CSS）。

私は試した：

var imageheight = document.getElementById(imageid).height;

と：

var imageheight = $('#' + imageid).height();

ただし、どちらも150pxCSSで割り当てられた属性を返します。どうすればこれを解決できますか？ありがとう

4

3 に答える 3

27

あなたはあなたを助けるための「自然な」kwsを持っています：

jsで：

var imageheight = document.getElementById(imageid).naturalHeight;

またはjqueryを使用

var imageheight = $('#' + imageid).naturalHeight;
于 2012-05-07T11:40:02.083 に答える
18

これを行う1つの方法は、別の画像オブジェクトを作成することです。

function getImageDimensions(path,callback){
    var img = new Image();
    img.onload = function(){
        callback({
            width : img.width,
            height : img.height
        });
    }
    img.src = path;
}

getImageDimensions('image_src',function(data){
    var img = data;

    //img.width
    //img.height

});

そうすれば、同じ画像を使用しますが、寸法が変更されたDOMの画像は使用しません。私の知る限り、キャッシュされた画像はこの方法を使用してリサイクルされます。したがって、追加のHTTPリクエストについて心配する必要はありません。

于 2012-05-07T08:04:58.737 に答える
1

naturalHeightandプロパティを使用するだけの@Dineshの答えnaturalWidthは素晴らしく、おそらく受け入れられる答えになるはずです。

この問題に関する多くのSO投稿を見て、かなりの時間を費やしてきたので、人々の時間を節約できる2つのことをここに追加したかっただけです。

  1. naturalHeight戻る0かundefined、画像が読み込まれる前に呼び出された場合。属性を設定するだけsrcでは、画像がすぐに読み込まれるとは限りません。で取得するのが最適であることがわかりましたonload。

    $('selector')[0].onload = function() {
  alert(this.naturalHeight);
  alert(this.naturalWidth);
}

  2. を使用しない場合はthis、$('selector').naturalHeight動作しない可能性があります。関連付けられているDOM要素にアクセスする必要がある場合があります。つまり$('selector')[0].naturalHeight、$('selector').get(0).naturalHeightネイティブJavascriptの属性を使用しているためですnaturalHeight。詳細については、このSO投稿を参照してください。

于 2020-03-09T10:09:58.057 に答える