如何根據背景圖像大小自動調整div的大小？

我需要的是簡單的：我有一個圖像具有1920x1080px，我把這個圖像作爲背景圖像在我的div。

我的代碼：

HTML：

<!DOCTYPE html> 
<html> 
<meta charset="UTF-8"/> 
<link rel="stylesheet" href="_css/Estilo.css"/> 
<head> 
    <title>ooOOOoos</title> 
</head> 
<body> 
    <div id=imgHeader> 
    <p>Hey!!</p> 
</div> 
</body> 
</html>

CSS：

@charset "UTF-8"; 

*{ 
    margin: 0; 
    padding: 0; 
} 

body{ 
    background-color: #ffffff; 
} 

#imgHeader{ 
    background: url(../_img/img1.jpg) no-repeat center center fixed; 
    background-size: cover; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -ms-background-size: cover; 
    -o-background-size: cover; 
}

我需要的是這樣的： enter image description here 但是...我得到這個：任何想法關於如何幫助我？

來源

2015-07-11 Matheus Cirillo

你最好的選擇是絕對定位與背景圖像的股利。然後，您可以將其設置爲拉伸整個寬度和高度。

#imgHeader{ 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 

    background: url(../_img/img1.jpg) no-repeat center center fixed; 
    background-size: cover; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -ms-background-size: cover; 
    -o-background-size: cover; 
}

Demo

編輯基於評論從OP

如果固定高度頭是你正在尋找實現，那麼你可以設置它min-height什麼：

#imgHeader{ 
     min-height: 80rem; 

     background: url(../_img/img1.jpg) no-repeat center center fixed; 
     background-size: cover; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -ms-background-size: cover; 
     -o-background-size: cover; 
    }

Demo

來源

2015-07-11 22:42:25 Guy

作品，但與此代碼，頁面滾動不apear，我需要 –

所以，你希望你的頁面滾動滾動在它的頂部？ – Guy

是的，當我滾動時，我的頁面應該變成灰色，這個div應該消失。示例：[here]（http://mobile.thescore.com/about-us/） –

您只需要爲div定義高度。我會建議使用100％，像這樣：

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html, body { 
 
    background-color: #ffffff; 
 
    height: 100%; /*see change here*/ 
 
} 
 
#cabecalho { 
 
    height: 100%; /*see change here*/ 
 
    background: transparent url("http://i.stack.imgur.com/vNQ2g.png") no-repeat fixed center center/contain; /*contain will ensure that the entire image is in view*/ 
 
}

<div id="cabecalho"> 
 
    <p>Hey!! Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead. 
 

 
Cum horribilem walking dead resurgere de crazed sepulcris creaturis, zombie sicut de grave feeding iride et serpens. Pestilentia, shaun ofthe dead scythe animated corpses ipsa screams. Pestilentia est plague haec decaying ambulabat mortuos. Sicut zeder apathetic malus voodoo. Aenean a dolor plan et terror soulless vulnerum contagium accedunt, mortui iam vivam unlife. Qui tardius moveri, brid eof reanimator sed in magna copia sint terribiles undeath legionis. Alii missing oculis aliorum sicut serpere crabs nostram. Putridi braindead odores kill and infect, aere implent left four dead. 
 

 
Lucio fulci tremor est dark vivos magna. Expansis creepy arm yof darkness ulnis witchcraft missing carnem armis Kirkman Moore and Adlard caeruleum in locis. Romero morbo Congress amarus in auras. Nihil horum sagittis tincidunt, zombie slack-jawed gelida survival portenta. The unleashed virus est, et iam zombie mortui ambulabunt super terram. Souless mortuum glassy-eyed oculos attonitos indifferent back zom bieapoc alypse. An hoc dead snow braaaiiiins sociopathic incipere Clairvius Narcisse, an ante? Is bello mundi z?</p> 
 
</div>

來源

2015-07-11 22:54:04 apaul

如何根據背景圖像大小自動調整div的大小？

回答

相關問題