Question

这似乎应该很容易，但我只是没有得到什么。

我想创建一个包含单个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>

然而，这是扩展到浏览器的整个宽度（对于宽而短的窗口）并产生垂直滚动，这不是我想要的。

我错过了什么？

Answer 1

怎么样：

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可确保不会出现任何滚动条（如果您有额外的内容。）

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

1 个答案: