未完全填充div的背景圖片

我正在創建一個聯繫頁面，並使用div來顯示業務每個分支的地址和名稱。我正在使用帶有徽標背景圖像的容器div，並在地址頂部放置文本。問題是背景圖像沒有填充整個div，即使我將div的寬度和高度設置爲圖像。未完全填充div的背景圖片

這裏是我的HTML

<div class="divContactImg"> 
    <div class="branchHeader">Durban</div> 
    <div class="branchText">82 Joe Slovo Street</div> 
    <div class="branchText">Durban</div> 
</div>

我的CSS：

.divContactImg { 
background-image: url('http://image.png'); 
width:225px; 
height:80px; 
border-left: thin solid #333; 
border-top: thin solid #333; 
border-right: thin solid maroon; 
border-bottom: thin solid maroon; 
float:left; 
text-align:left; 
margin-left: 5px; 
border-radius:5px; 
}     

.branchHeader { 
font-size: 24px; 
margin-left: 10px; 
margin-top: 5px; 
text-transform:uppercase; 

} 

.branchText { 
font-size: 12px; 
color:#cecece; 
margin-left: 10px; 
text-transform:uppercase;

}

我的形象是尺寸爲225×80個像素然而，當它呈現有它增加了兩個額外像素的高度和寬度，看起來像在頂部和左側的div有2像素差異，就好像有一些填充應用

來源

2014-06-10 Mikey

我試過你的代碼，它的工作正常。我使用了相同大小的圖片，並將我的網址替換爲我的網址。 http://jsfiddle.net/appleBud/28CEE/3/ – AppleBud

適用於最新的Firefox和IE：[jsfiddle]（http://jsfiddle.net/nunzabar/cQa6c/1/）。你確定你的圖片沒有2px邊框/填充嗎？ – nunzabar

用途：

background-size: cover;

，讓您的圖像填充它的父的背景。

實施例在一個小提琴：

http://jsfiddle.net/CztS6/1/

來源

2014-06-10 12:33:39 agconti

需要添加background-size:cover;或contain

.divContactImg { 
background-image: url('http://image.png'); 
width:225px; 
height:80px; 
border-left: thin solid #333; 
border-top: thin solid #333; 
border-right: thin solid maroon; 
border-bottom: thin solid maroon; 
float:left; 
text-align:left; 
margin-left: 5px; 
border-radius:5px; 
background-size: cover; /**add this**/ 
}

包含 - 按比例縮放所述圖像，以便該圖像是完全配合到該塊。

cover - 按比例縮放圖像，使其寬度或高度等於塊的寬度或高度。

來源

2014-06-10 12:34:14

請記住，如果使用'contains'且背景圖像不是div的確切大小，則圖像將嘗試重複其自身以按比例填充剩餘空間。這可能不是期望的，並且看起來有點有趣。小提琴：http://jsfiddle.net/CztS6/2/ – agconti

未完全填充div的背景圖片

回答

相關問題