首页 » Web技术 » HTML/CSS » 正文

一种让超大banner图片不拉伸、全屏宽、居中显示的方法

现在很多网站的Banner图片都是全屏宽度的,这样的网站看起来显得很大气。这种Banner一般都是做一张很大的图片,然后在不同分辨率下都是显示图片的中间部分。实现方法如下:

<html>
<head>
    <title>Title</title>
    <style>
        .bannerbox {
            width:100%;
            position:relative;
            overflow:hidden;
            height:200px;
        }
        .banner {
            width:3000px; /*图片宽度*/
            position:absolute;
            left:50%;
            margin-left:-1500px; /*图片宽度的一半*/
        }
    </style>
</head>
<body>
    <div class="bannerbox">
        <div class="banner">
            <img src="t1.jpg">
        </div>
    </div> 
</body>
</html>
把css中 .bannerbox 中 height 及 .banner 和 width 换成你banner图的大小,然后 .banner 中margin-left 的值改成banner图宽度的一半即可。

前面在《三列布局之中间固定宽度,两边自适应宽度》中写过一个方法 ,虽然也能实现这样功能,但是需要把图片切成三部分,而且两侧图片会拉伸,不推荐这种做法。

本文共 15 个回复

  • 小义 2014/02/27 10:30

    好方法~

    • Specs 2014/02/27 11:02

      @ 小义 咦 怎么评论了没有给我邮件提示呢?

      • 小义 2014/02/27 11:24

        @ Specs 貌似是没了,你回复的我没收到邮件

      • 小义 2014/02/27 11:24

        @ Specs 你用多说貌似就没邮件通知了吧?

  • 斌果 2014/02/28 10:32

    CSS3的size不错

  • 蜜蜂 2015/08/10 17:04

    非常不错的思路!

  • 乐乐+ 2015/09/23 14:35

    虽然能让图片居中,但是遇到块与块之间高度不等,就会受到限制!不灵活。

  • Melody 2015/11/06 09:49

    刚好解决了我的问题,感谢。 :grin:

  • 慢慢来比较快 2015/12/03 13:23

    请问一下我的banner为什么只出现一半?

  • treey 2016/11/16 13:02

    大神,我这边试了一下,没有好使啊,我这个图片有点大,1920*750的,按你上面写的设置好,两侧显示不全

发表评论