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;
}

<强> FIDDLE

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

3 个答案: