Css 全宽和全高SVG

进退两难：在不使用svg标记的情况下，生成充满纵横比失真的完整窗口svg图像。为什么没有svg标签？因为我打算以后（如果不是经常的话）在页面的生命周期中交换SVG，我还没有找到一个简单的方法来做到这一点

失败的尝试：

我也试过了

背景尺寸：包含；
背景尺寸：封面；
背景大小：100%100%；
背景位置：中心；

---

但是运气不好。

我在Firefox、Chrome和Safari中使用

<img src="my.svg" style="width:100%;height:100%;position:fixed;top:0;left:0;bottom:0;right:0;" />

诀窍是确保我正在显示的SVG在根目录中设置了preserveSpectratio=“none”。此外，我还必须删除SVG中的viewBox，或者确保它严格剪切图像内容

例如：

<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>

德国国旗

---

希望您能够控制要显示的SVG文件的内容。：-）

这里有一个jQuery解决方案。如您所见，我将它与不带

SVG一起使用

css

#bgImage{
    position:absolute;
    left:0;
    top:0;
}

html

<object width="10" height="10" id="bgImage" data="resources/runner.svg" type="image/svg+xml"></object>

每当您想调整图像大小时，通常在“onresize”和“onload”上运行此选项

---

这很好用。很明显，是Adobe Illustrator搞乱了我！

preserveSpectratio=“none”

提示真的救了我一命。谢谢对于其他人，请注意，如果您想让它生活在父对象中，position:fixed显然应该是position:absolute。preserveAspectRatio=“none”-谢谢！我的帖子中有一个

标签？修复程序，可能重复吗？我对删除jQuery选择参数犹豫不决，因为我喜欢它的灵活性。我想只调用resizeImage（）会更容易，但会受到更多约束。

//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
    }
}

$(window).resize(function(){
    resizeImage($("#bgImage"));
}