背景圖像高度100％

我正在尋找我的問題的解決方案。背景圖像高度100％

我使用Twitter的引導在移動網站上，這是我在移動視圖結果：

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

：

enter image description here

<div class="row"> 
    <div class="span4"> 
     <div class="visible-phone" style="background-image: url('http://upload.tapcrowd.com/upload/catalogimages/719/[email protected]');></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

但是，正如你所看到的，圖像和下面的內容之間有一段距離，有誰知道我該如何解決這個問題？

來源

2013-05-31 nielsv

請確保在CSS內容中設置了「Margin：0px」。 – Navigatron

設置margin:0; padding:0;雙方的形象和下面的內容。這將刪除任何保證金。由於默認情況下HTML會添加邊距，因此您需要明確告訴HTML以刪除邊距。

來源

2013-05-31 08:14:27 imulsion

background-size：contains;

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

「包含：該關鍵字指定背景圖像的規模應同時確保儘可能大的其兩個尺寸小於或等於的對應尺寸背景定位區域「。

所以，你的圖像已被縮放，使得它適合的元素完全 - 你似乎想用cover代替：

「封面：這個關鍵字指定了背景圖片應該是縮小到儘可能小，同時確保其尺寸大於或等於背景定位區域的對應尺寸。「

來源

2013-05-31 08:19:51 CBroe

背景圖像高度100％

回答

相關問題