这似乎应该很容易,但我只是没有得到什么.
我想创建一个包含单个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>
然而,这是扩展到浏览器的整个宽度(对于宽而短的窗口)并产生垂直滚动,这不是我想要的.
我错过了什么？
我在添加svg文件作为背景时遇到问题.一切似乎都很好,但在谷歌浏览器中,我在svg的右侧和底部得到非活动的滚动条,而不是容器.以下是问题结果的屏幕截图:http://xmages.net/show.php/2812560_strangescrollbars-jpg.html
这是css的一部分
#container>footer {
width: 1000px;
margin: -124px auto 0;
padding-top: 221px;
background: transparent url("../img/footerBackground.png") no-repeat 42px 0;
}
.backgroundsize.svg #container>footer {
background: transparent url("../img/vector/footerBackground.svg") no-repeat 42px 0;
background-size: 553px 166px;
}
我不知道他们来自哪里.有帮助吗？