Как масштабировать изображение SVG, чтобы заполнить окно браузера?

Question 1

Кажется, это должно быть легко, но я просто чего-то не понимаю.

Я хочу создать HTML-страницу, содержащую одно изображение SVG, которое автоматически масштабируется в соответствии с размером окна браузера, без какой-либо прокрутки и с сохранением соотношения сторон.

Например, на данный момент у меня есть SVG-изображение 1024x768; если размер окна просмотра в браузере составляет 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>

Однако это масштабирование до полной ширины браузера (для широкого, но короткого окна) и создание вертикальной прокрутки, чего я не хочу.

Что мне не хватает?

Question 2

Как насчет:

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может гарантировать, что полосы прокрутки никогда не появятся (если у вас есть дополнительный контент).

Answer 1

Кажется, это должно быть легко, но я просто чего-то не понимаю.

Я хочу создать HTML-страницу, содержащую одно изображение SVG, которое автоматически масштабируется в соответствии с размером окна браузера, без какой-либо прокрутки и с сохранением соотношения сторон.

Например, на данный момент у меня есть SVG-изображение 1024x768; если размер окна просмотра в браузере составляет 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>

Однако это масштабирование до полной ширины браузера (для широкого, но короткого окна) и создание вертикальной прокрутки, чего я не хочу.

Что мне не хватает?

Answer 2

Необъяснимо, я попытался переместить атрибуты встроенного стиля в блок стиля CSS в заголовке, и после этого это сработало. Я не знаю, почему это имело значение. (Хотя мне действительно нужно было добавить overflow: hidden - иначе была 4-пиксельная вертикальная прокрутка.)

Miral

Answer 3

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может гарантировать, что полосы прокрутки никогда не появятся (если у вас есть дополнительный контент).

Phrogz
источник

39

И запоздалый +1 за отказ от этой связи через 2 года.

msanford

7

Обратите внимание, что это решение полагается на viewBoxатрибут.

ubershmekel

4

Ссылка все еще существует, почти 4 года спустя. Хорошая работа, @Phrogz!

Ричард

11

Да, спасибо @Phrogz ... И на случай, если он когда-нибудь выйдет из строя, я сделал кодовую версию: codepen.io/cyanos/full/XbXxOQ

Джей

7

И +1 за более чем 8 лет

Судхир

Answer 4

39