Obtener tamaño de imagen real, después de cambiar el tamaño

Question

Tengo una página llena de miniaturas, redimensionado con css a 150x150, y cuando hago clic en una miniatura, la página se atenúa, y la imagen se muestra en sus tamaños reales.

Actualmente, tengo que crear manualmente una matriz que incluye la altura real de todas las imágenes. Para resolver un problema de diseño + menos operación manual de mi galería, necesito obtener la altura real de una imagen, después de redimensionarla (CSS).

me trataron:

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

Y:

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

Pero ambos devuelven el atributo asignado 150px con el CSS. ¿Como puedo resolver esto? Gracias

Answer 1

Una forma de hacerlo es crear un objeto de imagen separado.

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 

}); 

De esta manera, usará la misma imagen pero no la del DOM, que tiene dimensiones modificadas. Las imágenes en caché, hasta donde yo sé, se reciclarán utilizando este método. Así que no te preocupes por las solicitudes HTTP adicionales.

Answer 2

que tienen los KWS 'naturales' para ayudarle hacia fuera:

con JS:

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

o con jQuery

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