如何通過CSS拉伸背景圖像/圖像來填充容器？

Question

我有一個比例矢量圖像，我希望它填充一個容器。 關於SO有幾個這樣的問題，盡管它們有點老了。 例如， 拉伸和縮放CSS背景

但是，當我試圖實施這樣的解決方案時，結果令人失望。

例如：

    body  {

    margin: 0; 
    padding: 0;
    text-align: center; 
    color: #000;
    background-color: #000
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;

}

...

.twoColLiqLtHdr #container {
    width: 80%;
    margin: 0 auto; 
    border: 2px solid #000000;
    text-align: left; 
    background-color: #003;
    background-image: url('background_image.svg'); 
    /*background-position: 80% 80%; */

  background-repeat: no-repeat; 
    color: #000;
    font-family: "Times", cursive;


    background-attachment:fixed;
    min-height:100%;
    /*top: 0;
    left: 0; */



} 

我已經嘗試過各種各樣的安排，但我不能讓它伸展而不留空白區域（重復是成功的，但看起來很可怕）。

但是，由於我正在使用svg我可能以錯誤的方式接近這個，我應該在html中使用svg xmlns標簽嗎？ （PS我知道IE8絕對無法處理svgs）

Answer 1

你有沒有嘗試過

background-size:cover;

查看一些例子 。

我遇到了webkit， background-size:cover和SVG背景圖片的問題。 我解決了這個問題

-webkit-background-origin:border;

Answer 2

您可能需要將preserveAspectRatio =“none”添加為SVG圖像本身中外部<svg>元素的屬性。

如果您不想修改圖像文件，那么您可以嘗試

background-image：url（'background_image.svg＃svgView（preserveAspectRatio（none））'）;

Firefox 15也支持這個以及其他UA。