html - 背景图像高度 100%

Question

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

我正在为移动网站使用 Twitter Bootstrap ，这是我在移动 View 上的结果:

<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

background-size:contain;

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

"contain: This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area."

因此您的图像已缩放，因此它完全适合元素 - 您似乎想改用 cover:

"cover: This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area."