Question

我尝试在整个屏幕上将图像加载为“灯箱”图像。图像应调整大小到屏幕尺寸（每边35px空间 - 取决于较大的一面[宽度/高度]）但它不应该大于文件大小。我怎么能这样做？

$('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();
});

将图像调整为全屏或文件大小

1 个答案: