我定义了以下标头元素:
<div class="header">
<div class="row">
<div class="col-md-8 col-xs-12">
<h3 class="heading">Heading info here</h3>
<p>...</p>
</div>
<div class="col-md-4 hidden-xs header-image"></div>
</div>
</div>
这种风格:
.header-image {
background-image: url("../img/email.jpg");
}
但是图像没有占据整个div,事实上,当我在Chrome Inspector中查看它时,它的高度为1px,宽度为380px
如何在没有填充或边距的情况下占用div的整个宽度和高度?
答案 0 :(得分:2)
一个选项是使用background-size
属性(但请记住,在小于9的IE版本中不支持此选项):
background-size: 100% 100%;
这将填充div
的宽度和高度,但只有在div
具有自己的宽度和高度时才会显示:
.header-image {
width: /* your width */;
height: /* your height */;
}
答案 1 :(得分:0)
如果您希望在保持原始宽高比的同时覆盖整个区域,则应使用:
background-size:cover;
如果您希望整个图像适合div并且您不关心图像宽高比,请使用@josh告诉您的内容
background-size:100%100%;
但是,听起来你的div标题无论如何都没有正确的高度。你必须确保你想要的高度。查看chrome检查器中的规则,找出它只有1px的原因。作为一个黑客你可能想要增加高度:200px;或者你的.header课程中你需要的任何高度。
答案 2 :(得分:0)
尝试设置图像的显示属性
.header-image {
background-image: url("../img/email.jpg");
display:table-cell;
}
潜水
<div "style=display:table; text-align:center" class="col-md-4 hidden-xs header-image"></div>