CSS 全宽和全高 SVG
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9382434/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Full width and height SVG
提问by Fresheyeball
The dilemma: make a full window svg image that fills WITH aspect distortion, WITHOUT using an SVG tag. Why no svg tag? Because I intend on swapping out the SVG later (if not frequently) in the life of the page, and I have not found an easy way to do that.
困境：制作一个全窗口 svg 图像，填充纵横扭曲，而不使用 SVG 标签。为什么没有svg标签？因为我打算在页面生命周期中稍后（如果不是经常的话）换出 SVG，而且我还没有找到一种简单的方法来做到这一点。
The failed attempts:
失败的尝试：
<!-- for the record, my style are in a css file,
for example purposes they are style attrs-->
<!-- Working in Webkit but not in firefox, in firefox blocks stretching
and places the svg in the middle of the tag-->
<img src="my.svg" style="width:100%;height:100%;
position:fixed;top:0;left:0;bottom:0;right:0;" />
<!-- Both Webkit and Firefox block distortion, so the svg
appears centered in the div rather than conforming to the div-->
<div style="width:100%;height:100%;position:fixed;top:0;
left:0;bottom:0;right:0;background-size:cover;
background-image:url(my.svg);" />
I have also tried
我也试过
background-size:contain;
background-size:cover;
background-size:100% 100%;
background-postion: center center;
but no luck.
但没有运气。
回答by Michael Righi
I got this to work in Firefox, Chrome, and Safari using
我让它在 Firefox、Chrome 和 Safari 中使用
<img src="my.svg" style="width:100%;height:100%;position:fixed;top:0;left:0;bottom:0;right:0;" />
The trick was to make sure the SVG I was displaying had preserveAspectRatio="none" set in the root. Also, I had to either delete the viewBox in the SVG, or make sure it tightly cropped the image content.
诀窍是确保我显示的 SVG 在根中设置了 preserveAspectRatio="none" 。另外，我必须删除 SVG 中的 viewBox，或者确保它紧紧地裁剪图像内容。
For example:
例如：
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 5 3">
<desc>Flag of Germany</desc>
<rect id="black_stripe" width="5" height="3" y="0" x="0" fill="#000"/>
<rect id="red_stripe" width="5" height="2" y="1" x="0" fill="#D00"/>
<rect id="gold_stripe" width="5" height="1" y="2" x="0" fill="#FFCE00"/>
</svg>
Hopefully you have control over the content of the SVG files you are trying to display. :-)
希望您可以控制要显示的 SVG 文件的内容。:-)
回答by Adam
Here's a jQuery solution. As you can see, I'm using it with an SVG without <svg>
这是一个 jQuery 解决方案。如您所见，我将它与 SVG 一起使用，而没有<svg>
The css
css
#bgImage{
position:absolute;
left:0;
top:0;
}
The html
html
<object width="10" height="10" id="bgImage" data="resources/runner.svg" type="image/svg+xml"></object>
The javascript
javascript
//resize the background image
function resizeImage($selection){
//get the ratio of the image
var imageRatio = $selection.width() / $selection.height();
//get the screen ratio
var screenRatio = $(window).width() / $(window).height();
//if the image is wider than the screen
if(imageRatio > screenRatio){
$selection.height($(window).height()); //set image height to screen height
$selection.width($(window).height()*imageRatio); //set the correct width based on image ratio
}
//if the screen is wider than the image
else{
$selection.width($(window).width()); //set the image width to the screen width
$selection.height($(window).width()/imageRatio); //set the correct image height based on the image ratio
}
}
Run this whenever you want to resize the image, typically on "onresize" and "onload"
每当您想调整图像大小时运行它，通常在“onresize”和“onload”上
$(window).resize(function(){
resizeImage($("#bgImage"));
}
