如何使圖像占據整個div的高度和寬度？

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

如果要在保持原始寬高比的同時覆蓋整個區域，則應使用：

背景尺寸：封面；

如果您希望整個圖像適合div並且不關心圖像的寬高比，請使用@josh告訴您的內容

背景大小：100％100％；

但是，聽起來您的div標頭無論如何都不具有正確的高度。 您必須確保高度是您想要的高度。 查看chrome inspector中的規則，以了解為什么它只有1px。 作為一種技巧，您可能需要添加height：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>

檢查這個答案