divの背景となる.svgをどのようにスケールするのですか？

Question

私はこのようにそれにロゴを挿入するためのdivコンテナを使用しています

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

CSSは次のようになります。私はreziseしようとすると、しかし

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

#logo （例えば、より小さな画面の装置の場合）、画像は背景であるとサイズ変更されず、画像は縁でカットされる。

私の質問は次のとおりです。div-containerがスケーリングしている間に.svg-imageを拡大/縮小する方法は？

Answer 1

使用background-size: contain;

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

できるだけ大きな画像をスケーリングして画像のアスペクト比（画像が押しつぶされない）を維持

キーワードが含まれています。イメージはコンテナ内でレターボックス化されています。イメージとコンテナの寸法が異なると、空白領域（左/右の上下）が背景色で塗りつぶされます。バックグラウンドポジションなどの別のプロパティによってオーバーライドされない限り、画像は自動的に中央に配置されます。

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