现在很多网站的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图宽度的一半即可。

[转]一种让超大banner图片不拉伸、全屏宽、居中显示的方法的更多相关文章

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

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

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

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

  3. jQuery10种不同动画效果的响应式全屏遮罩层

    遮罩层有很多今天介绍这个jQuery10种不同动画效果的响应式全屏遮罩层 效果预览 下载地址 实例代码 <div class="container"> <head ...

  4. 可嵌入图片视频jQuery全屏滑块

    分享一款可嵌入图片视频jQuery全屏滑块.这是一款可定制的滑块幻灯片代码,支持键盘箭头切换.效果图如下: 在线预览   源码下载 实现的代码. html代码:     <script type ...

  5. iOS 图片的拉伸,取固定区域显示

    1.图片拉伸合适的尺寸 以及清晰度 UIButton * but =[[UIButton alloc]initWithFrame:CGRectMake(, , , )]; //拉伸 /*UIImage ...

  6. 设置ImageView显示的图片铺满全屏

    转自:http://m.blog.csdn.net/blog/wjwj1203/32334459   为适应不同屏幕的手机,ImageView显示的图片可能不铺满屏幕,如果定高的话,两边可能会出现空白 ...

  7. Android中两种设置全屏或者无标题的方法

    在开发中我们经常需要把我们的应用设置为全屏或者不想要title, 这里是有两种方法的,一种是在代码中设置,另一种方法是在配置文件里改: 一.在代码中设置: package jason.tutor; i ...

  8. Java_Swing中让窗口居中显示的方法(三种方法)

    方法一: int windowWidth = frame.getWidth(); // 获得窗口宽    int windowHeight = frame.getHeight(); // 获得窗口高 ...

  9. IOS中实现图片点击全屏预览

    //// ViewController.m// XWZoomImageView//// Created by xiao on 15/11/13.// Copyright © 2015年 xiao. A ...

随机推荐

  1. codevs 1082 线段树练习 3 区间更新+延迟标记

    题目描述 Description 给你N个数,有两种操作: 1:给区间[a,b]的所有数增加X 2:询问区间[a,b]的数的和. 输入描述 Input Description 第一行一个正整数n,接下 ...

  2. python 二叉排序树

    class BSTNode: def __init__(self, data, left=None, right=None): self.data = data self.left = left se ...

  3. img srcset 和 sizes

    img srcset 和 sizes 诞生的目的是解决图片清晰度和节省加载图片大小问题,比方说我需要在retina高的硬件上看到更细腻的图片,又或者我要在电脑看到的图片和在手机上的图片不一样.   解 ...

  4. C#验证中文

    C#验证中文的方式有很多种,下面列举了其中几种可供参考,还有正则表达式的验证这里没有写,后面有机会再补上. 方法一: private bool isChina(string msg) { string ...

  5. Oracle数据库system用户忘记了密码怎么办

    1.在运行里面输入cmd调出dos窗口,然后在dos窗口中输入sqlplus /nolog 如:D:\oracle\ora92\bin>sqlplus /nolog 2.输入连接命令 如:SQL ...

  6. English trip -- Review Unit6 Time 时间

    It's at seven o'clock   整点   7点整 It's at half past seven  or  It's seven-thirty7点30 It's at seven fi ...

  7. Android之ToolBar的使用

    Toolbar是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件 ,Google 非常推荐大家使用 Toolbar 来作为Android客户端的导航栏,以此来 ...

  8. quick pow

    #include<iostream> using namespace std; #define LL long long LL qpow(LL a,LL b,LL m) { LL r=1; ...

  9. Apache Tomcat 6.0 Tomcat6 服务因 1 (0x1) 服务特定错误而停止

    1.Tomcat目录下的bin

  10. ShardedJedis的使用

    假定有2个 redis 服务实例(A和B)在运行,在客户端进行 set 操作: set a0 xxx set a1 xxx set a2 xxx set a3 xxx 我们希望a0, a1, a2, ...