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

How make one section 100vh height becomes pixels after the page loads

本文关键字：一个 100vh 高度 像素 成像 加载      更新时间：2023-09-26

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

但是，当我移动浏览器大小时，页面会中断，因为图像始终会覆盖浏览器，但本节中的所有项目都将保留在所属的位置：

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

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

如果是这样，这可以通过一个简单的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

相关文章：