背景图像高度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:此关键字指定应将背景图像缩放到尽可能小,同时确保其尺寸大于或等于背景定位区域的相应尺寸."