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

【问题标题】：Resize image to fullscreen or filesize将图像大小调整为全屏或文件大小
【发布时间】：2014-03-23 14:08:34
【问题描述】：

我尝试将图像加载为整个屏幕上的“灯箱”图像。图像应调整为屏幕大小（每边有 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();
});

【问题讨论】：

“文件大小”是什么意思？你的意思是它不能比文件的原始大小大吗？
不，我指的是尺寸。即：如果图像文件的尺寸为3000x2000px，则图像将以屏幕尺寸显示，即1440x900px。但是如果图像的尺寸是 400x300px，它会显示为 400x300px，因为它不能大于那个。
好的；你想保持纵横比。
不应更改图像的纵横比。如果图像有 3:2，则始终应显示为 3:2，因此在上面的评论示例中，大图像将显示为 1350x900px。我在代码中标记了没有给我任何高度的行。

标签： jquery image-size

【解决方案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();
});

【讨论】：

@user3142695 如果我的回答对您有所帮助，请您投票赞成我的回答吗？
this.height和this.offset().height有什么区别？