如何使网站的背景图像开始适合屏幕然后缩放？

Question

我有一个非常大的图像4096 x 4096.我想把它作为我的网站的背景图像，当网站加载时我想在任何屏幕尺寸上显示完整的图像，但我也希望它可以缩放。

现在我刚刚在我的CSS中使图像的高度和宽度都达到了100％但显然无论如何都保持100％。有关如何实现这一目标的任何想法？

Answer 1

也许您只需要在背景中使用属性background-size: cover，如下所示：

body {
    background: url(xxx) no-repeat center center;
    background-size: cover;
}

Answer 2

如果我理解你的问题，那么，只需执行以下操作即可：

body {
    background: url(path-to/4096x4096.jpg) no-repeat;
    background-size: 100%;
}

请参阅jsfiddle demo。

Answer 3

我认为您可能正在寻找的是使用类似leaflet的内容来放大图像。

此链接here说明了将图像分解为所需图块的过程。

这有帮助吗？