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

编辑：007 时间：2015-07-15

    <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图宽度的一半即可。

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：电商行业的最后一块—旧物电商为何没人愿意碰

下一篇：淘宝假货问题恶化美协会向贸易代表署求救

回复列表

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

400-692-8081