実際の画像サイズは、サイズ変更後に取得します

Question

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

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

私が試した：

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

そして：

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

をしかし、両方がCSSに割り当てられた150px属性を返します。これをどうすれば解決できますか？ありがとう

Answer 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要求について心配する必要はありません。 JSと

：

Answer 2

はあなたを助けるために '自然' KWSを持って

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

やjQueryを使って

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