关于 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>
这可能吗?
最佳答案
你不需要javascript。您可以使用百分比指定页眉高度。然而,只有当 parent 指定了高度时,这才有效。
在你的例子中你应该添加
height: 100%;
对于 html
和 body
元素(header 的所有祖先),例如:
height: 40%;
为您的标题元素。
关于javascript - 自动设置覆盖背景图像的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23121091/