與背景圖像相同的大小

Question

所以我有一個帶有背景圖像的div，我希望在調整窗口大小時使div與背景圖像大小相同，所以我可以在它的中心放置一些文本，我希望圖像能夠響應，所以div也。

我的html圖片和文字：

<div id="headerimg" class="header">
    <h1>Welcome to my website</h1>
</div>

到目前為止我的cc：

#headerimg{
    background: url(http://images.huffingtonpost.com/2016-06-25-1466835058-3172856-DKCWebDesignBanner.jpg) no-repeat top center fixed;
    background-size: cover;
    width:100%;
}

.header{
    height: 700px;
    width: 100%;
    margin: auto;
    padding: 20%;
    color: white;
    text-align: center;
    font-size: 50px;
}

我只是使用谷歌atm的隨機圖像，以后更換病; 但無論如何..我怎么能得到高度對齊？ Jquery可能嗎？ - 但我真的不太熟悉jquery ......是的，我希望div一直是網站的全寬。

Answer 1

以下是適合您的工作：

https://jsfiddle.net/44k0320v/

我已更新您的標題寬度以使用50vw單位，您的示例圖像的縱橫比為2：1意味着如果您希望div保持正確的高度，則需要將高度設置為視口寬度的一半（橫跨屏幕寬度的測量值為100vw ）。

我還更新了背景圖像，使其大小為100%而不是cover因此它的寬度將與div縮放。

我還更新了字體大小以使用vw單位。

新的css如下：

#headerimg{
    background: url(http://images.huffingtonpost.com/2016-06-25-1466835058-3172856-DKCWebDesignBanner.jpg) no-repeat top center fixed;
    background-size: 100%;
}

.header{
    box-sizing: border-box;
    height: 50vw;
    width: 100%;
    margin: auto;
    padding: 10% 20%;
    color: white;
    text-align: center;
    font-size: 3.5vw;
}

Answer 2

與jazibobs類似的解決方案，也使用vw高度，但有更多“流動”文本。 目前背景將對幾乎任何寬度做出響應，但是在窄寬度下，它對文本並沒有多大意義。 為此，您可以使用媒體查詢甚至可能以較小的寬度隱藏背景，或者只是將文本設置得更小。

https://jsfiddle.net/kzhzasot/

#headerimg{
    background: url(http://images.huffingtonpost.com/2016-06-25-1466835058-3172856-DKCWebDesignBanner.jpg) no-repeat top center fixed;
    background-size: 100% auto;
    width: 100%;
    height: 100vh;
}

.header{
    margin: 0px;
    padding: 0;
    color: white;
    text-align: center;
    font-size: 50px;
    display: table;
}

h1 {
  display: table-cell;
  vertical-align: middle;
}