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

我想让一张照片占用用户屏幕的70％。但是，如果在页面加载时屏幕变小，或者如果人员检查了元素打开，图片变得很小并且拉伸。我相信最好的解决方案是找到浏览器窗口的最大高度，并将图像大小。但是，我不知道该怎么做？如何找到浏览器窗口的“最大化”高度？

这里是我当前的图像尺寸代码：

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

我也想这样，如果有人使用一个巨大的监视器（即大苹果），图像尺寸在这一点上马克塞斯做呢？任何建议都会非常有帮助！

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

来源

2013-12-22 David Mckee

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

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

来源

2013-12-22 22:18:43 Andrew

我期待修复高度，而不是宽度 –

使用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>

来源

2013-12-22 22:19:39 user3123649

这是有效的。如果你使用了这个，或者它帮助你将答案标记为接受。如果你没有使用这个，你能显示你做了什么吗？ – user3123649

如果你想要的形象占据视高度的70％（显然保持其比例），你可以使用新的CSS单元vh（视高度）是这样的：

img 
{ 
    height: 70vh; 
}

FIDDLE

来源

2013-12-22 22:25:09 Danield

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

回答

相关问题