如何縮放一個.svg作爲div的背景？

Question

我用一個div容器中插入一個標誌中這樣說：

<div id="logo"></div> 

的CSS是這樣的：

#logo { 
    width: 333px; 
    height: 200px; 
    background-image: url("../img/logo1.png"); 
    background-image: url("../img/logo0.svg"); 
} 

然而，當我嘗試rezise #logo （例如對於屏幕較小的設備），它不會調整作爲背景的圖像的大小，並且圖像會在邊緣切割。

我的問題是：如何在div容器縮放時縮放.svg-image？

Answer 1

使用background-size: contain;

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

包含

該縮放圖像儘可能地大，並保持圖像的縱橫比（圖像不會被壓扁）的關鍵字。圖像在容器內是letterbox。當圖像和容器具有不同的尺寸時，空白區域（左側/右側的頂部/底部）會填充背景顏色。圖像自動居中，除非被另一個屬性（如background-position）覆蓋。

html { 
 
    min-height:100%; 
 
    background:url(http://kompozer.sourceforge.net/images/logo/kpz08-chinon.svg) no-repeat; 
 
    background-size:contain; 
 
}