我正在制作一个只显示SVG图像的页面，这里是要求：
>矢量应该占据整个窗口
>矢量应该保持其宽高比(在SVG文件本身中定义)
>矢量应该剪裁/剪辑，以防止歪斜
CSS …
body {
background: url(/path/to/image.svg);
background-size: cover;
}
…几乎完美的工作，除了当浏览器窗口变得太窄，而不是裁剪/裁剪。
这里有一些屏幕截图(请忽略dabblet留下的文物)：
这里的窗口接近于原始图像的宽高比
这里窗口比宽高比“短”，并且图像正在裁剪(根据需要)。
这里的窗口比宽高比“窄”，而不是裁剪，图像是平铺(不需要的)。
这里有一些想法，我有…
>我可以以某种方式更改SVG图像以防止发生这种情况吗？
>我可以标记/样式页面来达到预期的效果吗？
>我宁愿保持在HTML / CSS的领域，但如果需要Javascript，那么就这样。
这是我正在使用的巧克力… http://dabblet.com/gist/6033198
解决方法
经过一些尝试和错误，这是我发现的。
添加(原始CSS)：
html {
height: 100%
}
提供了我正在寻找的原始规格。
此外，如果我想让图像在被裁剪时成为中心，我可以使用：
html {
background: url(path/to/image.jpg) no-repeat center center fixed;
background-size: cover;
}
最后，如果我想让它成为中心，始终保持长宽比，但不能裁剪(即一些空格是可以的)那么我可以做到：
body {
background: url(/path/to/image.svg) no-repeat center center fixed;
background-size: contain;
}
