html - 如何拉伸(stretch)背景 SVG，使其始终通过 CSS 填充 div？

Question

我在整个网站上搜索了这个问题的答案。 我需要始终使背景图像完全填充div。 图像周围有边缘，这些边缘是有纹理的，因此当我滚动进和出时它们必须保持在屏幕内并且不会被切断。 图像还必须始终覆盖页面的宽度和div的高度。

这是我发现并尝试过的(没有一个成功):

• 使用背景大小:100% 100%； 这不起作用，因为当我滚动进出时，图像保持其分辨率并且不再覆盖整个拉伸(stretch)的 div。 (即使更改值仍然不起作用。)
• 使用背景大小:封面； 这不起作用，因为首先它在正常情况下会切断图像的左侧和右侧，然后当我滚动时它会切断顶部和底部。
• 我还尝试过在 div 中使用 img 标签并设置它们的样式，但是我开始遇到一个问题，即 image 只是很薄大纲。

我真正想做的是让 CSS 拉伸(stretch) image 以覆盖页面的宽度，但保持 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%;
}

这是根据要求提供的一些图片；

This is with background-size: 100% 100%; and default zoom

This is with background-size: cover; and default zoom

不幸的是，我不能发布超过 2 个链接，所以我希望有所帮助。

如您所见，使用 background-size: 100% 100%; ，这正是我在默认缩放时所希望的效果，但是当向外滚动时，宽度 image 的 > 缩小以保持相同的比例。滚动时，图像的高度会减小以保持相同的比例。

当在默认缩放下使用background-size: cover;时，左右边缘会被切断，这是一个问题。放大时，它仍然会切断左右两侧，但会填充 div。向外滚动时，它会切断顶部和底部边缘，但会填充 div。

我希望它填充 div 但不希望它切断边缘。

Answer 1

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

打开您的 SVG 文件并将以下属性添加到根(即最外层/第​​一个)<svg>文件中的标记。

preserveAspectRatio="none"

如果已经有preserveAspectRatio属性，然后将其值更改为 "none" .