这看起来应该很容易，但我只是没有得到一些东西。
我想制作一个包含单个 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:absoluteposition:fixed（使用
position:fixedoverflow:hidden我只想为那些需要 svg 适合宽度和高度而不保留纵横比的人添加preserveAspectRatio =“none” - 例如
<svg id="burgerCover" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 745.45 704.55" preserveAspectRatio="none">
<defs>
<style>
.cls-1{
fill:#d8e720;
}
</style>
</defs>
<path class="cls-1" d="M0,0H745.45V593.18s-133,112.46-372.72,111.37C122.73,703.41,0,593.18,0,593.18Z"/>
</svg>