Получите фактический размер изображения, изменив его размер.

У меня есть страница, заполненная эскизами, измененная с помощью css на 150x150, и когда я нажимаю на миниатюру, страница тускнеет, и изображение отображается в ней с истинными размерами.

В настоящее время мне приходится вручную создавать массив, который включает фактическую высоту всех изображений. Для решения проблемы дизайна + менее ручной работы моей галереи мне нужно получить фактическую высоту изображения после того, как я изменил его размер (CSS).

Я пробовал:

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

и

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

Но оба возвращают атрибут 150px, назначенный с помощью CSS. Как я могу это решить? Благодаря

Ответ 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-запросах.

Ответ 2

у вас есть "естественные" kws, чтобы помочь вам:

с js:

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

или с помощью jquery

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