javascript - 自动设置覆盖背景图像的高度

Question

关于 this website ，我正在使用 Background 规则的 CSS3 Cover 属性在页眉后面拉伸(stretch)图像。

现在，我必须将 header 元素设置为 min-height 为 500px 才能正常工作。但是，这不是最佳解决方案，因为当我调整窗口大小时，我预计高度会降低，因此图像会按比例缩小。我认为解决方案可能是在 Javascript 中？

代码如下:

<div style="background: url(http://altushealthsystem.com/dev/wp-content/uploads/home-banner.jpg) no-repeat 0 0 transparent;background-size: cover; min-height: 500px;"></div>

Link to the JS Fiddle

这可能吗？

Answer 1

你不需要javascript。您可以使用百分比指定页眉高度。然而，只有当 parent 指定了高度时，这才有效。

在你的例子中你应该添加

height: 100%;

对于 html 和 body 元素(header 的所有祖先)，例如:

height: 40%;

为您的标题元素。