SVG画像をブラウザウィンドウいっぱいに拡大縮小する方法は？

簡単なはずですが、なかなか手に入れません。

スクロールせずに、アスペクト比を維持しながら、ブラウザウィンドウに合わせて自動的に拡大縮小する単一のSVG画像を含むHTMLページを作成したいと考えています。

たとえば、現時点では1024x768のSVG画像があります。ブラウザのビューポートが1980x1000の場合、画像を1333x1000で表示します（垂直方向に塗りつぶし、水平方向に中央揃えにします）。ブラウザが800x1000だった場合、800x600で表示したいと思います（水平方向に塗りつぶし、垂直方向に中央揃えにします）。

現在、私はそれを次のように定義しています：

<body style="height: 100%">
  <div id="content" style="width: 100%; height: 100%">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
         width="100%" height="100%"
         viewBox="0 0 1024 768"
         preserveAspectRatio="xMidYMid meet">
      ...
    </svg>
  </div>
</body>

ただし、これはブラウザーの全幅に拡大し（幅が広く短いウィンドウの場合）、垂直スクロールを生成します。これは私が望んでいることではありません。

何が欠けていますか？

— ミラル
ソース

どういうわけか、インラインスタイル属性を先頭のCSSスタイルブロックに移動してみましたが、その後は機能しました。なぜそれが違いを生んだのか分かりません。（オーバーフローを追加する必要がありましたが、非表示-それ以外の場合は4ピクセルの垂直スクロールがありました。）

— Miral

175

どうですか：

html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; bottom:0; left:0; right:0 }

または：

html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; left:0; height:100%; width:100% }

私はすべての約5％のパディングとはいえ、（およそ）この技術を用いて、使用して自分のサイト上での例を持っているposition:absolute代わりにposition:fixed：
http://phrogz.net/svg/svg_in_xhtml5.xhtml

（を使用position:fixedすると、ページのサブページアンカーにリンクするという非常にエッジケースのシナリオが防止され、overflow:hiddenスクロールバーが表示されないようにすることができます（余分なコンテンツがある場合）。

— フロッグス
ソース

そして、そのリンクを2年上に残すための遅い+1。

— msanford 2013

このソリューションはviewBox属性に依存していることに注意してください。

— ubershmekel 14

リンクはまだそこにあり、ほぼ4年後です。@Phrogzさん、よくできました！

— Richard

はい、@ Phrogzに感謝します...そしてそれがダウンした場合に備えて、私はcodepenバージョンを作成しました：codepen.io/cyanos/full/XbXxOQ

— Jay

8年以上+1

— Sudhir Kaushik