0

我正在寻找我的问题的解决方案。

我正在将 twitter bootstrap 用于移动网站，这是我在移动视图上的结果：

在此处输入图像描述

<div class="row">
    <div class="span4">
        <div class="visible-phone" style="background-image: url('http://upload.tapcrowd.com/upload/catalogimages/719/catalogimagecardealer@2x.png');></div>
        <p class="metadataTitle metacell">
        <span style="display: inline-block" class="ellipsis">Car Dealers</span>
        <span style="table-row"></span></p>
        </div>  
    </div>
</div>

我的图像所在的 div 的 css：

background-size:contain;
background-repeat: no-repeat;
background-position: center center;
width: 100%; 
height: 300px;"

但是正如您所看到的，图像和下面的内容之间存在边距，有谁知道我该如何解决这个问题？

4

2 回答 2

5

背景大小：包含；

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size：

“contain：该关键字指定背景图片在保证其两个尺寸都小于或等于背景定位区域对应尺寸的情况下，应该尽可能的放大。”

因此，您的图像已被缩放，使其完全适合元素 - 您似乎想cover改用：

“cover：该关键字指定背景图片在保证两个尺寸都大于或等于背景定位区域对应尺寸的情况下，尽量缩小。”

于 2013-05-31T08:19:51.417 回答
1

设置margin:0; padding:0;为下面的图像和内容。这将删除任何边距。由于 HTML 默认会添加边距，因此您需要明确告诉 HTML 删除边距。

于 2013-05-31T08:14:27.287 回答