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

现在很多网站的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
 
返回

作者:

该日志由 clairelume 于6年前发表在Php分类下，
转载请注明: 一种让超大banner图片不拉伸、全屏宽、居中显示的方法 | moon's blog +复制链接
关键字: , ,
【上篇】
【下篇】

您可能还会对这些文章感兴趣！

  1. 解决js下跳转无referer的方法
  2. php过滤表单提交的危险代码
  3. 使用PHP导入和导出CSV文件
  4. 关于CI框架分页类的心得
  5. 安装imagick时Cannot locate header file MagickWand.h
  6. jQuery 常用方法经典总结
  7. js格式化时间
  8. jquery处理json对象
安装imagick时Cannot locate header file MagickWand.h错误的解决
Win7下删除文件夹总删除不了的解决办法
Nginx支持手机访问(WAP/XHTML)相关配置
WordPress 分页文章静态化修正

抱歉!评论已关闭.

返回首页

Copyright © 2011-2017 moon's blog  保留所有权利.