Кажется, это должно быть легко, но я просто ничего не понимаю.
Я хочу создать 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>
Однако это масштабирование дополная ширина браузера (для широкого, но короткого окна) и вертикальная прокрутка, а это не то, что мне нужно.
Чего мне не хватает?