Question

我想让我的背景图像在调整窗口大小时动态调整大小。如果图像比例发生变化则无关紧要。所以我尝试这样做的方法是设置

width: 100vw;
height: 100vh;

for body

中的 img 。

它做了我想要的，但是图像是一个标签，所以其他标签放在它下面的布局上，我找不到让所有其他标签忽略图像的方法。

我也找不到办法

body {
    background-image: url("bckg.jpg");
    //hoooooow?
}

有什么建议吗？

Answer 1

如果您不希望裁剪图像，但要始终采用100％的高度和宽度，请尝试以下操作：

IList<Point> points1 = lines.Select(o => o.StartPoint).ToList();
IList<Point> points2 = lines.Select(o => o.EndPoint).ToList();

IList<Point> points = points1.Concat(points2).ToList();

小提琴here

Answer 2

如果您希望根据窗口大小缩放背景图像，为什么不使用以下内容：

body {
    background-image: url("bckg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

所以重要的一行是：background-size: cover;这可以确保背景图片“覆盖”页面的可见部分

CSS图像动态调整大小

2 个答案: