Question

我想知道如何在整个浏览器中制作图像，即使我的网站在更大的显示器中观看，图像仍会延伸并延伸，而不会在最后显示空白区域。

Answer 1

你基本上有两个选择：

使用填充整个宽度的重复图案：您可以使用
执行此操作
width: 100%; background: url(your-image-file) repeat-x
使用固定的主图像和填充剩余区域的背景填充图像：背景将使用与上面相同的代码，主图像可以是背景容器中的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;
}

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

为了放置您想要跨越而不是完全覆盖的奇怪尺寸的图像，我建议使用<div>为图像创建一个位置，并为<div>添加一个样式width: 100%;说。

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

希望这有帮助。

在Facebook横幅中跨越浏览器跨越图像，但现在是图像

2 个答案: