现在很多网站的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. 转载：oracle RAC集群启动和关闭

    http://www.cnblogs.com/yhfssp/p/8184761.html oracle 11G RAC集群启动和关闭: 1.停止数据库 $srvctl stop database –d ...

  2. STL_容器使用时机

    1. 来自教程: ◆ Vector的使用场景:比如软件历史操作记录的存储,我们经常要查看历史记录,比如上一次的记录,上上次的记录,但却不会去删除记录,因为记录是事实的描述. ◆ deque的使用场景: ...

  3. php 8小时时间差的解决方法小结

    原来从php5.1.0开始,php.ini里加入了date.timezone这个选项,默认情况下是关闭的 也就是显示的时间(无论用什么php命令)都是格林威治标准时间 和我们的时间(北京时间)差了正好 ...

  4. LncRNA

    简介:长链非编码RNA(Long non-coding RNA, lncRNA)通过多种机制发挥其生物学功能, 这些机制包括基因印记.染色质重塑.细胞周期调控.剪接调控.mRNA降解和翻译调控等.ln ...

  5. 在WPF中添加Windows Form控件（包括 ocx控件）

      首先,需要向项目中的reference添加两个dll,一个是.NET库中的System.Windows.Forms,另外一个是WindowsFormsIntegration,它的位置一般是在C:\ ...

  6. 快速搭建一个简易的KMS 服务

    xu言: 之前,闹的沸沸扬扬的KMS激活工具自身都存在问题的事.让我们对以前的什么小马激活.kms激活.各种激活工具都去打了一个深深的“?”,到底哪些能用.哪些不能用.有些还注明的里面必须要关闭杀毒软 ...

  7. Vue.js Cookbook: 添加实例属性; 👍 axios（4万➕✨）访问API; filters过滤器;

    add instance properties //加上$,防止和已经定义的data,method, computed的名字重复,导致被覆写.//可以自定义添加其他符号. Vue.prototype. ...

  8. python-day33--互斥锁

    锁的意思就是:一个一个的执行 from multiprocessing import Process,Lock import os import time def work(mutex): mutex ...

  9. zk请求和响应对

    zk的请求和响应是通过id对应上的: 请求头(RequestHeader)和响应头(ReplyHeader)共用一个xid,它的本质是ClientCnxn类中的一个计数器. 1. 首先看客户端: Pa ...

  10. Idea破解办法+idea免费生成注册码+jsp属性选择器+注解什么的都报错

    Idea破解办法: http://blog.csdn.net/bitcarmanlee/article/details/54951589 idea免费生成注册码: http://idea.iteblo ...