html width不能满屏,如何在限宽的容器中实现全屏效果

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

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

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

页面结构

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

...

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

.container {

width: 960px;

margin-left: auto;

margin-right: auto;

}

.banner .container {

width: 100%;

}

.banner img {

width: 100%;

max-width: 100%

}

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

....

...

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

CSS解决方案

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

.full-width{

position: absolute;

left: 50%;

transform: translateX(-50%);

}

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