Question

我在这个网站上搜索过这个问题的答案。我需要始终background image完全填写div。 image周围有edges纹理，因此当我滚动进出并且不会被切断时，它们必须留在屏幕内。 image也必须始终涵盖页面的width和height的{{1}}。

这是我发现并尝试过的（没有一个成功）：

使用div 这不起作用，当我滚动进出图像保持其分辨率，不再涵盖延伸的整个div。（即使改变这些值仍然无效。）
使用background-size: 100% 100%; 这不起作用，因为首先它会在正常情况下切断background-size: cover;的左侧和右侧，然后当我向外滚动时会切掉顶部和底部。
我还尝试在image中使用img标签并对其进行样式设置但是我开始遇到问题div只是一个薄的轮廓。

我真正想做的是让image拉伸CSS以覆盖页面的宽度，但保持div的高度。我明白这会扭曲图像，我很好。有没有办法做到这一点？非常感谢任何帮助。

这就是我现在所拥有的。

image

以下是一些要求的图片;

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

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

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

正如您所看到的，使用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-size: 100% 100%;的{{1}}会减少以保持相同的比例。滚动时，width的{{1}}会缩小以保持相同的比率。

在默认缩放上使用image时，左右边缘会被切断，这是一个问题。放大时，它仍会切断左右，但会填充height。滚动时，它会切断顶部和底部边缘，但会填充image。

我希望它填充background-size: cover;，但不希望它切断边缘。

Answer 1

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

打开SVG文件并将以下属性添加到文件中的根（即最外层/第一个）"notification" : { "title" : "New message", "body" : "You have a new message!", "sound" : "default", //"badge" : "1", //"content_available" : true, "priority" : "high" }, "to" : recipientID,标记。

<svg>

如果此处已存在preserveAspectRatio="none"属性，则将其值更改为preserveAspectRatio。

Answer 2

试着给出最小宽度：100％

Answer 3

尝试修复背景background-attachment:fixed;，

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以便它总是通过CSS填充div？

3 个答案: