首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何缩放SVG图像以填充浏览器窗口?

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

Stack Overflow用户
提问于 2011-04-13 08:47:40
回答 1查看 84.4K关注 0票数 97

这看起来应该很简单,但我就是不明白。

我想制作一个包含单个SVG图像的HTML页面,该图像可以自动缩放以适应浏览器窗口,而无需任何滚动,同时保持其纵横比。

例如,目前我有一个1024x768的SVG图像;如果浏览器的视区是1980x1000,那么我希望图像以1333x1000的大小显示(垂直填充,水平居中)。如果浏览器是800x1000,那么我希望它以800x600显示(水平填充,垂直居中)。

目前我对它的定义如下:

代码语言:javascript
复制
<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>

然而,这是放大到浏览器的整个宽度(对于一个宽而短的窗口),并产生垂直滚动,这不是我想要的。

我遗漏了什么?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2011-04-13 12:33:45

这样如何:

代码语言:javascript
复制
html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; bottom:0; left:0; right:0 }

或者:

代码语言:javascript
复制
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可以确保不会出现滚动条(以防您有额外的内容)。)

票数 189
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/5643254

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档