Question

我正在创建一个联系页面，并使用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 x 80像素，但是当它渲染时，它会在高度和宽度上增加两个像素，看起来div的顶部和左侧内部有2个像素差异，几乎就像如果有一些填充被应用

Answer 1

您需要添加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**/
}

包含 - 按比例缩放图像，使图像完全适合块。

封面 - 按比例缩放图像，使其宽度或高度等于块的宽度或高度。

Answer 2

使用：

background-size: cover;

使您的图片填充其父级的背景。

小提琴中的例子：

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

背景图片没有完全填充div

2 个答案: