爲覆蓋的背景圖像自動設置高度

在this website上，我使用Background規則的CSS3 Cover屬性將圖像拉伸到標題後面。爲覆蓋的背景圖像自動設置高度

現在，我必須將header元素設置爲具有500px的min-height才能工作。但是，這不是一個最佳解決方案，因爲當我調整窗口大小時，我預計高度會變小，因此圖像會按比例縮小。我想這個解決方案可能在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

這可能嗎？

來源

2014-04-16 farjam

如果可能，可以發佈'html'，'css'，'js'？謝謝 – guest271314

它住在[這裏]（http://altushealthsystem.com/dev/），請讓我知道你是否仍然需要我發佈html/css。 – farjam

如果可能，可以在原始帖子中發佈'html'，'css'，'js'？謝謝 – guest271314

你不需要javascript。您可以使用百分比指定標題高度。但是，只有父母指定身高時才能使用。你頭元素

height: 40%;

：

在你的榜樣，你應該添加

height: 100%;

爲html和body元素（頭的所有祖先），例如。

來源

2014-04-16 22:26:52 damgad

謝謝，它的工作原理。 – farjam

，而不用聲明的頭背景的，你可以用下面的樣式添加圖像元素：

<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標籤的優勢，申報一定的寬度和高度時，屏幕具有一定的尺寸。

來源

2014-04-16 22:31:18 chavakane

我認爲你的解決方案比我的背景更好。謝謝 – farjam

但是我仍然看到一個問題，現在我的內容隱藏在該圖像下方。 – farjam

您應該使用z-index修復該問題。 [鏈接]（https://developer.mozilla.org/en-US/docs/Web/CSS/z-index） – chavakane

爲覆蓋的背景圖像自動設置高度

回答

相關問題