背景图像高度100％

Question

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

我在移动网站上使用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;"

但正如您所看到的，图片与下方内容之间存在差距，是否有人知道如何解决此问题？

Answer 1

  

背景尺寸：含有

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

  

“contains：此关键字指定应将背景图像缩放到尽可能大，同时确保其尺寸小于或等于背景定位区域的相应尺寸。”

因此，您的图片已经缩放，以便完全适合元素 - 您似乎想要使用cover代替：

  

“cover：此关键字指定应将背景图像缩放到尽可能小，同时确保其尺寸大于或等于背景定位区域的相应尺寸。”

Answer 2

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