现在很多网站的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. .NET网页打印以及使用打印需要注意的事项(可能会引起VS崩溃的现象、打印预览后关闭功能不管用)

    这两天进行给网页添加打印.打印预览.页面设置的功能.遇到了以下几个问题 [1]在网上查找了一些打印方法,一开始还可以用,后来不知道动到了哪里,点击vs中拆分或者切换到另一个设计和源代码显示方式,就会引 ...

  2. Schedule 学习

    现在做的项目都有用到Schedule,现在用一点时间来总结. 一.首先要到Nuget中下载Quartz.net. 二.下载下来了,你需要对它进行配置,使它能给你正常的使用. 三.在Global.asa ...

  3. 安全协议系列（三）----CCMP与WPA-PSK

    本节讨论 CCM 在 WiFi 中的实际应用 -- CCMP 协议 根据 RFC 3610,完成 CCMP 报文的加解密,需要提供:分组密钥(K).随机数(Nonce).附加认证数据(AAD),这三个 ...

  4. C语言文法 LL(1)文法

    程序->外部声明 | 程序 外部声明 程序->外部声明A' A'->外部声明A'|ε 外部声明->修饰符 变量名 形参 修饰符->void | int | char | ...

  5. Ubuntu 64位下搭建ADT的种种问题

    我使用的adt版本为 adt-bundle-linux-x86_64-20140702.zip 1. Eclipse启动时提示 adb 无法加载动态链接库 libstdc++.so.6 以及  lib ...

  6. C++ mem_fun 和 mem_fun_ref 的用法

    假设我们有以下的一个类: 另外有一个包含 class A 对象的数组: vector<A> vec; 如何对每一个类的对象调用成员函数print. 做法1: 利用下标 for(int i= ...

  7. 响应式图片srcset学习

    响应式图片srcset全新释义sizes属性w描述符 先转再看

  8. c++ 顺序容器适配器

    第一次看到stack,以为它是一个和vector同等地位的容器,其实不是 官方解释:stacks are a type of container adaptor, specifically desig ...

  9. rsync一些安全的使用方法

    总的来说,开在873端口之后,只要加上验证口令,安全性就有保障了,但毕竟多开一个端口,而且rsync的密码是明文方式存储的,相对来说,还是有被监听的可能.根据不同的情况采用下述不同方案,相对来说,安全 ...

  10. nginx日志分析利器GoAccess

    面试的时候一定会被面到的问题是:给出web服务器的访问日志,请写一个脚本来统计访问前10的IP有哪些?访问前10的请求有哪些?当你领略过goaccess之后,你就明白,这些问题,除了考验你的脚本背诵记 ...