如何使“图像横幅”100%的视窗没有页边距，其余的页面中心

Question

我的问题是如何让横幅成为视口的100%，同时保持所有其他东西的中心。

现在，我正在尝试使用骨架框架，以使用其预制的@media解决方案和网格系统。我注意到，因为它是一个960网格系统，所以我不能在它里面放一个横幅，它将转到视口的100% (因为它被限制到960px )。

我想要一个解决方案，允许我继续使用骨架框架，我可以得到一个像this site这样的100%视口横幅的工作作为一个例子。

如果这是不可能的，那么我将需要指导的最好的方法来完成这一点。

Answer 1

如果我正确理解您的问题，这通常是通过横幅中的包装器来完成的。

示例：

HTML：

<div class="banner">
    <div class="wrapper">
        <h1>Example Title</h1>
    </div>
</div>

CSS：

.banner {
    background: url(/* Your image */) center center no-repeat;
    background-size: cover;
    height: /* Whatever height */;
}

.wrapper {
    margin: 0 auto; /* This is what centers it */
    max-width: 1000px;
    width: 96%;
 }

因此，在内容的每个部分(页眉、主页、页脚等)中都会有单独的包装器。

要在Skeleton中使用它，它应该是这样的(在非常简要地查看了他们的文档之后)。

HTML：

<div class="banner">
    <div class="container"><!-- Your 960 grid -->
        <div class="six columns><!-- Or however much of your 960 you want it to take up-->
            <!-- Content -->
        </div>
    </div>
</div>