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

Question

我在整个网站上搜索了这个问题的答案。我需要制作一个 background image 始终完全填充 div。 image 周围有 edges 纹理，因此当我滚动进出时它们必须留在屏幕内并且不会被切断。 图片 还必须始终覆盖页面的宽度 和div 的高度。

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

• 使用 背景大小:100% 100%;这不起作用，因为当我滚动进出时图像保持其分辨率并且不再覆盖整个拉伸(stretch)的 div。 (即使更改值仍然无效。)
• 使用 background-size: cover;这不起作用，因为首先它在正常时切断了 image 的左侧和右侧，然后当我向外滚动时它切断了顶部和底部。
• 我也尝试过在 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%; 这正是我在默认缩放时想要的方式，但是在滚动时，width image 的 > 缩小以保持相同的比例。滚动时，image 的height 会减小以保持相同的比例。

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

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

Answer 1

您需要更改 SVG 在呈现为图像时的缩放方式。

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

preserveAspectRatio="none"

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