Div與背景圖像大小相同

所以我有一個背景圖像的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始終是整個網站的全部寬度。

來源

2016-07-02 mheonyae

是你正在尋找實現的東西？ https://jsfiddle.net/sanjeevks121/koLrs1Le/ –

我想你的div是站點/窗口的完整大小，你可以嘗試使用'vw/wh'像這樣：'#headerimg {background：url（http： //images.huffingtonpost.com/2016-06-25-1466835058-3172856-DKCWebDesignBanner.jpg）no-repeat top center; background-size：cover; 寬度：100vw; 身高：100vh; }' – Konrud

當您調整大小時，您是否希望保持div的縱橫比？ – jazibobs

會像下面爲你工作：

https://jsfiddle.net/44k0320v/

我已經更新了你的頭寬度使用50vw單位，你的榜樣形象具有arount的縱橫比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; 
}

來源

2016-07-02 12:36:41 jazibobs

是的，那就是我一直在尋找的。但是，我還可以讓文字縮放，而讓窗口更小或更大？ – mheonyae

是的，你可以在CSS上面粘貼'font-size：3.5vw'來看看嗎？ – jazibobs

是的，我明白了，但是如果我調整窗口的大小，文本會保持相同的大小，如果需要，它只需將它自己分成兩行。 – mheonyae

類似的解決方案，以jazibobs，也利用大衆高度，但更多的「flowy」文本。目前，背景會對幾乎任何寬度做出反應，但是在較窄的寬度下，對文本沒有多大意義。爲此，您可以使用媒體查詢，甚至可以以較小的寬度隱藏背景或僅設置較小的文本。

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; 
}

來源

2016-07-02 12:53:11

Div與背景圖像大小相同

回答

相關問題