如何找到浏览器窗口的“最大化”高度？

Question

我试图让图片占据用户屏幕的70％。 但是，如果在加载页面时使屏幕变小或者如果人员打开了检查元素，则图像会变小并拉伸。 我相信最好的解决方案是找到浏览器窗口的最大高度，并使图像大小。 但是，我不知道该怎么做？

这是我目前的图像大小调整代码：

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>  

Answer 2

听起来你想要做的是这样的事情：

img{
    display:block;
    width:70%;
    min-width:320px;
    max-width:1200px;
}

Answer 3

如果您希望图像占据视口高度的70％（并且显然保持其比率），您可以使用新的css单位vh （视口高度），如下所示：

img
{
    height: 70vh;
}

小提琴