在Web布局中，特别是在PC端中，常常可以看到这样的设计风格：内容居中，然后Banner区全屏。这也就是标题所说的效果，限宽的容器中实现全屏效果。那么问题来了，在实际中如何实现在限宽的容器中实现全屏效果。比如下面的设计风格：

作为一名前端开发人员，上图的效果并不陌生。假设我们内容区域是960px，然后水平居中。而其中Banner区域是全屏效果。如下所示：

那么实际开发中以什么方式来做更为方便灵活呢？这就是这篇文章需要介绍的内容。

页面结构

针对这样的设计风格，前端人员考虑的结构会有：

<div class="header">
    <div class="container"></div>
</div>
<div class="banner">
    <div class="container">
        <img src="" alt="">
    </div>
</div>
...

这种结构要实现上述的需求，并不复杂。

.container {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}

.banner .container {
    width: 100%;
}

.banner img {
    width: 100%;
    max-width: 100%
}

但很多时候，全屏图片的效果并不仅仅是在Banner区域。比如说在文章中插入的图片也需要全屏效果。那么针对上面的结构，咱们就有点蛋疼了。比如：

<div class="main">
    <div class="container">
        <p>....</p>
        <figure class="full-width">
            <img src="" alt="">
        </figure>
        <p>...</p>
    </div>
</div>

这才是问题的关键，如何让.full-width中的img能实现全屏的效果。正如文章开头的示意效果图。

CSS解决方案

针对上面描述的情况，首先能考虑到的方案就是采用我们常能看到的水平居中的一个效果。比如我们有一个元素（元素大小未知），要其水平居中。首先想到的是：

.full-width{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

在此思路上进行一下扩展。.full-width容器宽度是浏览器全屏宽度，在你脑海中立马浮现的是100%，但问题是，该元素是放置在.container容器中，而它的宽度又是960px。如果仅仅在.full-width上设置100%，那它的宽度并不等于浏览器视窗的全屏宽度，而是一个