Question

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

我正在创建一个新的应用程序。第一部分是覆盖浏览器高度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;
}

然而，当我移动浏览器大小时，分页会因为图像总是覆盖浏览器，但此部分中的所有项目都将保留在所属的位置：

页面加载后，部分的高度可能会变成像素吗？因此，它总是捕捉到浏览器大小，但如果我调整浏览器大小，则不会移动。

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

如何使一个部分100vh高度在页面加载后变为像素

1 个答案: