Как масштабировать SVG-изображение, чтобы заполнить окно браузера?
Кажется, что это должно быть легко, но я просто ничего не получаю.
Я хочу сделать HTML-страницу, содержащую один SVG-образ, который автоматически масштабируется в соответствии с окном браузера без прокрутки и при сохранении его соотношения сторон.
Например, на данный момент у меня есть изображение SVG 1024×768; если окно просмотра браузера равно 1980×1000, тогда я хочу, чтобы изображение отображалось с разрешением 1333×1000 (заполнение по вертикали, по центру по горизонтали). Если браузер был 800×1000, тогда я хочу, чтобы он отображался при 800×600 (горизонтально, вертикально по центру).
- Изменение размера изображения CSS и сохранение пропорций
- Как бороться с различными пропорциями в libGDX?
- Поддерживать соотношение сторон в соответствии с высотой
- Поддерживать соотношение сторон по ширине и высоте
В настоящее время я определил это так:
... Однако это масштабирование до полной ширины браузера (для широкого, но короткого windows) и создания вертикальной прокрутки, чего я не хочу.
Что мне не хватает?
Как насчет:
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 может гарантировать, что полосы прокрутки никогда не появятся (в случае, если у вас есть дополнительный контент).