javascript - 如何找到浏览器窗口的 "maximized"高度？

Question

我试图让一张图片占据用户屏幕的 70%。但是，如果在加载页面时屏幕变小或者用户打开了检查元素，则图片会变小并被拉伸(stretch)。我相信最好的解决方案是找到浏览器窗口的最大高度并将图像设置为该大小。但是，我不确定该怎么做？

这是我当前的图像大小调整代码:

var topoffset = window.innerHeight * 0.77;
var profilestart = topoffset - $(".prof-header").height();
$('.splashPic').css("height", topoffset);
$('.splashPlaceholder').css("top", profilestart);

我还想做到这一点，如果有人使用巨大的显示器(即大型 Mac)，图像尺寸会在那个时候最大吗？任何建议都会非常有帮助!

编辑:我不想让图像动态调整大小。只加载一次。

Answer 1

使用 window.screen.availHeight 而不是 window.innerHeight

或screen.height

var x = screen.height*0.7;

编辑:这里有更多代码表明它适用于您的要求。在加载时获取高度并且不调整大小。

<img id="img2" src="http://lorempixel.com/320/240/food" />

<script>
$(document).ready(function () {
    var x = screen.height*0.7;
    $('#img2').css("height",x);
}
</script>