如何根据背景图片大小自动调整div的大小？

时间：2015-07-11 22:39:43

标签： html css image background

我需要帮助调整我的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 但是..我得到了这个： enter image description here 关于如何帮助我的任何想法？

2 个答案:

答案 0 :(得分：2)

最好的办法是将div与背景图像绝对定位。然后你可以设置它来拉伸整个宽度和高度。

#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

答案 1 :(得分：1)

您只需要为div定义高度。我建议像这样使用100％：

＆＃13;
＆＃13; 
* {
  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*/
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题