现在的位置: 首页Php>正文
一种让超大banner图片不拉伸、全屏宽、居中显示的方法
2016年10月21日 Php 评论关闭 ⁄ 被围观 3,580 次+

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

  1. <html>  
  2.    <head>  
  3.        <title>Title</title>  
  4.        <style>  
  5.            .bannerbox {  
  6.                width:100%;  
  7.                position:relative;  
  8.                overflow:hidden;  
  9.                height:500px;  
  10.            }  
  11.            .banner {  
  12.                width:1920px; /*图片宽度*/  
  13.                position:absolute;  
  14.                left:50%;  
  15.                margin-left:-960px; /*图片宽度的一半*/  
  16.            }  
  17.        </style>  
  18.    </head>  
  19.    <body>  
  20.        <div class="bannerbox">  
  21.            <div class="banner">  
  22.                <img src="t1.jpg">  
  23.            </div>  
  24.        </div>   
  25.    </body>  
  26.    </html>  

把css中 .bannerbox 中 height 及 .banner 和 width 换成你banner图的大小,然后 .banner 中margin-left 的值改成banner图宽度的一半即可。

本文地址:http://www.92csz.com/16/1257.html
如非注明则为本站原创文章,欢迎转载。转载请注明转载自:moon's blog
 

抱歉!评论已关闭.