css - 像在 facebook 横幅中一样跨越浏览器的图像，但现在是图像

Question

我想知道如何在浏览器中制作图像，即使我的网站在更大的显示器中查看，图像仍会跨越并扩展，而不会在最后显示空白。

Answer 1

你基本上有两个选择：

1. 使用填充整个宽度的重复图案：您可以使用

   width: 100%; background: url(your-image-file) repeat-x

2. 使用固定的主图像和填充剩余区域的背景填充图像：背景将使用与上述相同的代码，并且主图像可以是img背景容器中的一个。

Answer 2

好吧，首先，让我们用这段代码清除你的利润。

* {            
    margin: 0;
    padding: 0;
}

通过在您的样式表或部分中使用它，它将允许这些图像一直延伸而没有空白。

接下来，您需要创建一个看起来不歪斜的图像。为此，您首先需要以相当宽的格式创建它。如果您想填充整个背景，我建议您选择合适1028X768 px的尺寸。

最后，是时候放置最后一点代码并让它全部工作了。

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

这将适用于所有当前浏览器（IE8 及以下版本除外）附近的 dang。

为了放置一个您想要跨越但不完全覆盖的奇数大小的图像，我建议使用 a为<div>图像创建一个位置并为.<div>width: 100%;

这也可以通过高度来完成。

希望这可以帮助。