javascript - 如何让一段100vh的高度在页面加载后变成像素

Question

站点 -> http://bit.ly/1ocSOjA

我相信这是一个真正复杂的问题。我试图找到解决方案，但一无所获..

我正在创建一个新应用程序。第一部分是覆盖 100% 浏览器高度的图像。

为此，我使用高度:100vh；

<section class="p-hero" id="hero">
</section>

.homepage .p-hero {
    background: url("../img/capa/head-inverse2.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    height: 100vh;
}

但是，当我移动浏览器大小时，页面会中断，因为图像总是会覆盖浏览器，但此部分中的所有元素都会留在它们所属的位置:

有没有可能页面加载后section的高度变成pixels？所以它总是捕捉到浏览器的大小，但如果我调整浏览器的大小就不会移动。

Answer 1

据我了解，您希望它在页面首次加载时调整图像大小，使其填满浏览器的整个高度。当用户之后调整浏览器大小时，您希望它保持这个大小而不是缩小或扩大。

如果是这样，这可以通过一个简单的 jQuery 函数来完成，该函数仅在首次加载文档时调用。

HTML

 <img id="hero" src="http://placekitten.com/g/2000/3000">

jQuery

$(document).ready(function(){
  $("#hero").css('height',$(window).height());
});

实例:http://codepen.io/anon/pen/raVebQ