这似乎应该很容易,但我只是没有得到任何东西。
我想制作一个包含单个 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>
然而,这是放大到浏览器的整个宽度(对于一个宽而短的窗口)并产生垂直滚动,这不是我想要的。
我错过了什么?
viewbox
不起作用!
怎么样:
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
可以确保不会出现滚动条(以防您有额外的内容。)时间>
不定期副业成功案例分享
viewBox
属性。