Question

在this website上，我使用Cover规则的CSS3 Background属性来拉伸标题后面的图片。

现在，我必须将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。您可以使用百分比指定标题高度。但是，仅当父级指定了高度时才会起作用。

在您的示例中，您应该添加

height: 100%;

表示html和body元素（标题的所有祖先），例如：

height: 40%;

为你的标题元素。

Answer 2

您可以添加具有以下样式的图像元素，而不是为标题声明背景：

<header....> 
<img src="http://altushealthsystem.com/dev/wp-content/uploads/home-banner.jpg" style="max-width:100%; height:auto;position: absolute;z-index: -999;">

  <div class="container">
    <div class="row top-row">
...

当屏幕具有一定的大小时，你还应该利用@media标签声明一定的宽度和高度。

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

2 个答案: