[解決済み] SVG 画像をブラウザのウィンドウいっぱいに拡大縮小するには？
2023-01-10 06:06:38
質問
これは簡単なことのように思えますが、私は何かを得ることができないのです。
私は、ブラウザのウィンドウに合わせて自動的に拡大縮小する単一の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>
しかし、これはブラウザの幅いっぱいに拡大され（幅は広いが短いウィンドウのため）、私が望むものではない垂直スクロールを発生させます。
何が足りないのでしょうか?
どのように解決するのですか？
どうでしょう。
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
はスクロールバーが表示されないようにすることができます (余分なコンテンツがある場合に備えて。)。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン