CSS背景自然縮放內容

我正在從100％的桌面背景移動，並且一旦我點擊平板電腦/手機尺寸就更改爲移動背景。我的問題是，隨着我的規模縮小，內容開始超過背景長度。CSS背景自然縮放內容

#bg { 
background-image: url('images/bg.gif'); 
background-size: 100% ;    
background-repeat: no-repeat;  
position: relative; 
height: 100%; 
}

然後去992px。此圖片是992px寬，1425px高度

#bg { 
background-image: url('images/mobile/mobile-bg.jpg'); 
background-size: 100% auto; 
}

HTML結構

<div class="row main-content" > 
    <div class="col-xs-12" id="bg"> 
     <div class="row"> 
      <div class="col-xs-12 "> 
       <div class="row"> 
        <!-- content here --> 
       </div> 

      </div> 
     </div> 
    </div> 
</div> <!-- row main-content end -->

我不明白爲什麼它能夠擴展並保持內容，直到它變得更小（例如，移動的大小）

我錯過了什麼？我不想拉伸圖像。我想保持正確的比例。我只需要一個更高的bg圖像嗎？

來源

2014-09-02 Clam

嘗試用'container' div封裝'main-content' div。 – Oriol 2014-09-02 23:09:17

它周圍有一個容器。我沒有將它包含在 – Clam 2014-09-02 23:26:36

我相信你正在尋找cover或contain的背景大小。 MDN有更多在這裏：https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Cover會使背景圖片儘可能小，同時保持縱橫比和contain將確保背景圖像，同時保持率儘可能的大。

如果您需要支持低於版本9的IE，您需要某種polyfill。

#bg { 
    background-image: url('images/bg.gif'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    position: relative; 
    height: 100%; 
}

來源

2014-09-02 23:06:51 Anton

的例子中，似乎是一個改進。我最終在背景的右邊緣留出空間..不知道爲什麼......就好像它沒有覆蓋寬度的100％ – Clam 2014-09-02 23:24:24

你有網上的例子嗎？ MDN鏈接到這裏的一個例子：http://whereswalden.com/files/mozilla/background-size/page-cover.html使用封面，並沒有利潤率，但分辨率確實有點粗糙。檢查你有圖像的股利沒有一個邊緣或填充導致問題，甚至容納該div的容器。 – Anton 2014-09-03 00:29:36

我不安靜究竟得到了什麼你你試着實現可能要看看這個 http://www.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-background-images/

可能這是你想要的，因爲它會根據設備擴展和裁剪圖片尺寸。

.bg{ 
    background:url(imgurl/picture.jpg) no-repeat center center; 
    background-size: cover; 
}

這就是我個人的用法。最有可能在手機，大型平板電腦，大型桌面媒體查詢中使用3種不同尺寸的適當圖像。不是因爲圖像不會縮放，而是爲較小的設備節省帶寬。

來源

2014-09-02 23:17:29 user1452407

爲什麼封面然後在右側創建空間是有原因的。它粘在屏幕的左側，但似乎沒有達到100％的寬度 – Clam 2014-09-02 23:27:18

是的，默認情況下在左側和右側都有空白。如果你刪除它們，它應該使空間消失。 – user1452407 2014-09-02 23:29:30

好吧，它不是完美的，因爲封面看起來像切斷雙方，因爲它達到了最小的瀏覽器寬度。我想這是最好的，它可以做的水庫 – Clam 2014-09-03 00:12:19

CSS背景自然縮放內容

回答

相關問題