如何缩放SVG图像以填充浏览器窗口？

我想制作一个包含单个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>

然而，这是扩大到浏览器的全宽（用于广角但短期窗口），生产垂直滚动，这是不是我想。

我错过了什么？

来源

2011-04-13 Miral

令人费解的是，我试图移动在线样式属性添加到头部的CSS样式块中，然后工作。我不知道为什么它有所作为。（虽然我确实需要添加溢出：隐藏 - 否则有一个4像素的垂直滚动。） – Miral 2011-04-13 05:07:49

119

如何：

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可以确保不断出现没有滚动条（如果你有额外的内容。）

来源

2011-04-13 04:33:45 Phrogz

+24

和一个离开连接了2年后+1。 – msanford 2013-04-11 00:26:47

请注意，此解决方案依赖于'viewBox'属性。 – ubershmekel 2014-04-12 15:05:57

大约4年后，这个链接就是在这里。好工作，@Progrog！ – Richard 2015-03-05 23:09:42

如何缩放SVG图像以填充浏览器窗口？

回答

相关问题