Изменить размер изображения на полноэкранный или размер файла

Question

Я пытаюсь загрузить изображение в виде «лайтбоксов» на полном экране. Изображение должно быть изменено до размера экрана (с пространством 35 пикселей на каждой стороне - в зависимости от большей стороны [ширина/высота]), но оно не должно превышать размер файла. Как я могу это сделать?

$('body').prepend('<div id="overlay" style="display: none;"></div>'); 
$('#overlay').fadeIn(); 

$('body').prepend('<div id="content" style="display: none;"><img class="photo" src="images/file.jpg" /></div>'); 
$(".photo").load(function(){ 
    var h_image = $(this).height()-70; // I do not get the height of the image... What's wrong? 
    var h_screen= $(window).height()-70; 
    if (h_image> h_screen) { 
     $(this).height(s_screen); 
    } 
    else { 
     $(this).height(h_image); 
    } 
    $('#content').fadeIn(); 
}); 

Answer 1

Вам нужно изменить height() к offset().height:

$('body').prepend('<div id="overlay" style="display: none;"></div>'); 
$('#overlay').fadeIn(); 

$('body').prepend('<div id="content" style="display: none;"><img class="photo" src="images/file.jpg" /></div>'); 
$(".photo").load(function(){ 
    var h_image = $(this).offset().height-70; 
    var h_screen= $(window).height()-70; 
    if (h_image> h_screen) { 
     $(this).height(s_screen); 
    } 
    else { 
     $(this).height(h_image); 
    } 
    $('#content').fadeIn(); 
});