Question

我定义了以下标头元素：

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

Answer 1

一个选项是使用background-size属性（但请记住，在小于9的IE版本中不支持此选项）：

background-size: 100% 100%;

这将填充div的宽度和高度，但只有在div具有自己的宽度和高度时才会显示：

.header-image {
    width: /* your width */;
    height: /* your height */;
}

Answer 2

如果您希望在保持原始宽高比的同时覆盖整个区域，则应使用：

background-size：cover;

如果您希望整个图像适合div并且您不关心图像宽高比，请使用@josh告诉您的内容

background-size：100％100％;

但是，听起来你的div标题无论如何都没有正确的高度。你必须确保你想要的高度。查看chrome检查器中的规则，找出它只有1px的原因。作为一个黑客你可能想要增加高度：200px;或者你的.header课程中你需要的任何高度。

Answer 3

尝试设置图像的显示属性

.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

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

3 个答案: