Html 如何拉伸背景SVG，使其始终通过CSS填充div？

我已经在这个网站上搜索了所有关于这个问题的答案。 我需要制作一个

背景图像

始终完全填充

div

。

图像

周围有

边缘

，这些边缘经过纹理处理，因此当我滚动进出时，它们必须留在屏幕内，而不是被切断。

图像

还必须始终覆盖页面的

宽度

，以及

div的
高度

以下是我的发现和尝试（没有一个成功）：


使用
背景大小：100%100%
这与我在图像中滚动时的效果不同，图像保持其分辨率，不再覆盖整个拉伸的div。（即使更改值也不起作用。）

使用
背景尺寸：封面
这不起作用，因为它首先在正常情况下切断图像的左右两侧，然后在我向外滚动时切断顶部和底部

我还尝试在
div
中使用
img
标记并对它们进行样式化，但是我开始遇到一个问题，
图像
只是一个很薄的轮廓

我实际上想做的是使
CSS
拉伸
图像
以覆盖页面的宽度，但保持div的高度。我知道这会扭曲图像，我同意。有办法做到这一点吗？非常感谢您的帮助

这就是我现在拥有的

div.two {
    position: center;
    width: 100%;
    height: 1111px;
    background-image: url("Task 7 body 1.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

以下是一些需要的图片



不幸的是，我不能张贴超过2个链接，所以我希望这有帮助

如您所见，背景大小为100%100%

这正是我在默认缩放时想要的效果。然而，当向外滚动时，

图像的
宽度
减小，以保持相同的比例。向内滚动时，
图像的
高度
减小，以保持相同的比率

使用
背景尺寸时：封面在默认缩放时，左右边缘被切断，这是一个问题。放大时，它仍然会切断左侧和右侧，但会填充
div
。向外滚动时，它会切断顶部和底部边缘，但会填充
div

我想让它填充
div，但不想让它切断边缘。
只需尝试提供最小宽度：100%
尝试修复背景
背景附件：修复,

div.two {
    position: center;
    width: 100%;
    height: 1111px;
    background-image: url("Task 7 body 1.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    background-attachment:fixed; //fix it to background
}

不管div的宽度/高度是多少。图像将拉伸到其全宽和全高

谢谢
 您需要更改SVG作为图像渲染时的缩放方式

打开SVG文件并将以下属性添加到文件中的根（即最外层/第一个）
标记

preserveAspectRatio="none"

如果已经有一个
preserveSpectratio
属性，那么将它的值更改为
“none”
你能显示一些输出的视觉效果吗/error它不像看起来那么简单：我编辑了一点我的帖子，以便根据要求显示我的问题的照片。我已经浏览了这个链接，不幸的是找不到解决方案。不管怎样，谢谢你的帮助。我刚刚试着在IE中打开html，它完全按照我想要的方式工作。我一直在使用Chrome，但有问题。也许Chrome不是最好的选择，因为我也面临着其他问题。有什么办法可以解决Chrome无法正常运行的问题吗？我在这里面临的问题是，图像的顶部和底部被切断，宽度被缩小，即使我将其设置为100%。更不用说在页面上下移动时，背景也会随之移动。无论如何，谢谢你的帮助。谢谢你的评论。我尝试了一些不同的变量，但仍然不是我想要的。当我翻来覆去的时候，它仍然会剪掉边缘。啊，是的！这已经做到了。现在效果很好。非常感谢你的帮助。这很好，但在FF中不行，你有什么想法吗？看起来FF忽略了
preserveSpectratio
@vicodin它应该在工作。如果不是，那么打开一个新的问题并发布一个例子。