如何在限宽的容器中实现全屏效果

特别声明:本站已开启付费阅读,年费会员价 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

在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%,那它的宽度并不等于浏览器视窗的全屏宽度,而是一个

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css/full-width-containers-limited-width-parents.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部