Jak przeskalować obraz SVG, aby wypełnił okno przeglądarki?

Question 1

Wydaje się, że powinno to być łatwe, ale po prostu czegoś nie rozumiem.

Chcę utworzyć stronę HTML zawierającą pojedynczy obraz SVG, który jest automatycznie skalowany w celu dopasowania do okna przeglądarki, bez przewijania i przy zachowaniu współczynnika proporcji.

Na przykład w tej chwili mam obraz SVG 1024x768; jeśli rzutnia przeglądarki ma wymiary 1980 x 1000, chcę, aby obraz był wyświetlany w rozmiarze 1333 x 1000 (wypełnienie w pionie, wyśrodkowanie w poziomie). Jeśli przeglądarka miała rozmiar 800x1000, chcę, aby wyświetlała się w rozmiarze 800x600 (wypełnienie w poziomie, wyśrodkowanie w pionie).

Obecnie mam to tak zdefiniowane:

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

Jednak jest to skalowanie do pełnej szerokości przeglądarki (dla szerokiego, ale krótkiego okna) i generowanie przewijania w pionie, czego nie chcę.

czego mi brakuje?

Question 2

Co powiesz na:

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

Lub:

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

Mam na mojej stronie przykład, w którym (w przybliżeniu) zastosowano tę technikę, aczkolwiek z 5% dopełnieniem dookoła i position:absolutezamiast position:fixed:
http://phrogz.net/svg/svg_in_xhtml5.xhtml

(Użycie position:fixedzapobiega bardzo skrajnemu scenariuszowi linkowania do kotwicy podstrony na stronie i overflow:hiddenmoże zapewnić, że żadne paski przewijania nigdy się nie pojawią (w przypadku dodatkowej zawartości).

Answer 1

Wydaje się, że powinno to być łatwe, ale po prostu czegoś nie rozumiem.

Chcę utworzyć stronę HTML zawierającą pojedynczy obraz SVG, który jest automatycznie skalowany w celu dopasowania do okna przeglądarki, bez przewijania i przy zachowaniu współczynnika proporcji.

Na przykład w tej chwili mam obraz SVG 1024x768; jeśli rzutnia przeglądarki ma wymiary 1980 x 1000, chcę, aby obraz był wyświetlany w rozmiarze 1333 x 1000 (wypełnienie w pionie, wyśrodkowanie w poziomie). Jeśli przeglądarka miała rozmiar 800x1000, chcę, aby wyświetlała się w rozmiarze 800x600 (wypełnienie w poziomie, wyśrodkowanie w pionie).

Obecnie mam to tak zdefiniowane:

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

Jednak jest to skalowanie do pełnej szerokości przeglądarki (dla szerokiego, ale krótkiego okna) i generowanie przewijania w pionie, czego nie chcę.

czego mi brakuje?

Answer 2

Z niewyjaśnionych przyczyn próbowałem przenieść atrybuty stylu wbudowanego do bloku stylu CSS w głowie, a potem zadziałało. Nie wiem, dlaczego to miało znaczenie. (Chociaż musiałem dodać przepełnienie: ukryte - w przeciwnym razie było 4-pikselowe przewijanie w pionie.)

Miral

Answer 3

175

Co powiesz na:

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

Lub:

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

Mam na mojej stronie przykład, w którym (w przybliżeniu) zastosowano tę technikę, aczkolwiek z 5% dopełnieniem dookoła i position:absolutezamiast position:fixed:
http://phrogz.net/svg/svg_in_xhtml5.xhtml

(Użycie position:fixedzapobiega bardzo skrajnemu scenariuszowi linkowania do kotwicy podstrony na stronie i overflow:hiddenmoże zapewnić, że żadne paski przewijania nigdy się nie pojawią (w przypadku dodatkowej zawartości).

Phrogz
źródło

39

I późne +1 za pozostawienie tego linku 2 lata później.

msanford,

7

Zauważ, że to rozwiązanie opiera się na viewBoxatrybucie.

ubershmekel

4

Link nadal istnieje, prawie 4 lata później. Dobra robota, @Phrogz!

Richard

11

Tak, dzięki @Phrogz ... I na wszelki wypadek zrobiłem wersję codepen

Jay

7

I +1 od ponad 8 lat

Sudhir Kaushik

Answer 4

39