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

<html>

   <head>

       <title>Title</title>

       <style>

           .bannerbox {

               width:100%;

               position:relative;

               overflow:hidden;

               height:500px;

           }

           .banner {

               width:1920px; /*图片宽度*/

               position:absolute;

               left:50%;

               margin-left:-960px; /*图片宽度的一半*/

           }

       </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图片不拉伸、全屏宽、居中显示的方法的更多相关文章

  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. TestNG插件的安装问题

    一.可以采用离线安装的方式 离线安装若不成功,可以删除之前的eclipse,然后在新下载eclipse中添加离线安装包 1.离线安装方法: 发现很多同学和我一样无法在线安装testNg,现在分享一个离 ...

  2. CI关于自动加载

    /application/config/autoload.php文件中定义自动加载的包.类库.helper.用户配置文件.语言文件.模块 类库会到/application/libraries目录或/s ...

  3. 程序测试用的IE浏览器第二次无法加载入口程序的问题及其解决方法

    注:针对的是C#程序(Silverlight) 第一步.找到入口程序所在的路径,以记事本形式打开<入口程序.csproj>,由于之前配置入口程序时,设置了“Use Local IIS We ...

  4. Beta版

    Beta版使用说明 各文件介绍:本软件是基于visual studio 2010 平台,使用C#语言开发的windows窗体游戏.该游戏共有七个界面,分别是开始界面,游戏说明界面,模式选择界面,经典模 ...

  5. Oracle 数据库--一个用户同步的sql

    用户同步的sql: insert into crm_customer_user ,username,,,,,id, from sys_user where username not in (selec ...

  6. Linux内核分析——进程描述与创建

    20135125陈智威 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 实验内容 ...

  7. C# treeview 绑定数据 【转】

    private void bindTreeView1() { string sql = "select * from dm_category"; DataTable dt = db ...

  8. Linux中的find（-atime、-ctime、-mtime）指令分析

    本篇主要对find -atime(-ctime..mtime)指令的用法.参数.运行情况进行分析 用法: find . {-atime/-ctime/-mtime/-amin/-cmin/-mmin} ...

  9. 模板volist自增变量

  10. 关于上传app遇到的一些棘手的小问题

    最近上传了一个app,由于是第一次上传,花费在这上面的时间不比做app的耗时短啊....说多了都是泪.下面为了不让大家掉坑里去,分享一些小经验: 1.使用别人的开发者账号上传完自己的app(本人暂无开 ...