98

これは簡単なように思えますが、何も得られません。

スクロールせずに、アスペクト比を維持しながら、ブラウザー ウィンドウに合わせて自動的に拡大縮小する単一の 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>

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

私は何が欠けていますか？

4

1 に答える 1

191

どうですか：

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% }

私のサイトには、この手法を (大まかに) 使用している例がありposition:absoluteますposition:fixed。

(を使用position:fixedすると、ページのサブページ アンカーにリンクするという非常に特殊なシナリオが回避され、overflow:hidden(余分なコンテンツがある場合に備えて) スクロール バーが表示されないようにすることができます。)

于 2011-04-13T04:33:45.220 に答える