如何缩放.svg作为div中的背景？

Question

我使用div-Container在其中插入徽标，如下所示：

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

css看起来像这样：

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

但是，当我尝试重新调整#logo时（例如对于屏幕较小的设备），它不会调整背景图像的大小，而是在边缘处剪切图像。

我的问题是：如何在div容器缩放时缩放.svg-image？

Answer 1

使用background-size: contain;

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

  

<强>包含

     

一个关键字，可以尽可能地缩放图像并保持图像宽高比（图像不会被压扁）。图像在容器内是letterboxed。当图像和容器具有不同的尺寸时，空白区域（左/右上/下）用背景颜色填充。除非被其他属性（如background-position）覆盖，否则图像会自动居中。

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