Resize image to fullscreen or filesize

Question

I try to load an image as a "lightbox" image on the complete screen. The image should be resized to the screensize (with 35px space on each side - depending on the bigger side [width/height]) but it shouldn't get bigger than the filesize. How can I do that?

$('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

You need to change height() to 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();
});