如何使图像占据整个div的高度和宽度?

时间:2014-03-02 23:56:25

标签: html css

我定义了以下标头元素:

<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的整个宽度和高度?

3 个答案:

答案 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>

check this answer