现在很多网站的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. 硬件抽象层——HAL

    (一)为什么要在android中加入HAL Linux系统中Linux驱动有两种类型的代码:访问硬件寄存器的代码——调用的Linux内核的标准函数进行的标准操作  业务逻辑代码——有些企业或个人并不想 ...

  2. css3的3D和2D

    css3的3D旋转:rorateX():参数为正值时,盒子是围绕x轴,完成从Y轴正方向到Y轴负方向的旋转,视觉上呈现高度上的变化.rorateY():参数为正值时,盒子是围绕Y轴,完成从X轴正方向到X ...

  3. 北大poj-2688

    Cleaning Robot Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4395   Accepted: 1763 De ...

  4. 使用USRP探索无线世界 Part 1：USRP从入门到追踪飞机飞行轨迹

    温馨提示:请自觉遵守无线电管理法规,依法设置和使用无线电设备 0×00 前言 USRP是数款流行的SDR硬件中功能和应用都相对成熟的一款产品,从WIFI协议.ZigBee协议.RFID协议.GSM通信 ...

  5. Shell if 判断之detail

    参考: http://blog.chinaunix.net/uid-20788517-id-3135826.html

  6. system_call中断处理过程分析

    本文所有的分析内容都是基于Linux3.18.6内核,鉴于对应不同内核版本,系统调用的实现不相同.若需要分析其他版本内核的系统调用的实现过程,请谨慎参考. system_call函数的功能是用来响应外 ...

  7. PHP 记录日志

    public function writelog($message) { $logFileDir = LOG_PATH; $logFile = 'monitor' . date('Y-m-d') . ...

  8. 关于变量和函数前&符号的作用

    首先看一下下面的例子 <?php $a="val1"; $b="val2"; $a=&$b; echo $a."<br/>& ...

  9. Eclipse+Python+Selenium自动化测试框架搭建

    1.下载Eclipse:http://www.eclipse.org/downloads/ 2.下载JDK:http://www.oracle.com/technetwork/java/javaee/ ...

  10. libev学习（一）

    一.libev简介 Libev是一个事件循环:你注册感兴趣的特定事件(比如一个文件可以读取时或者发生超时时),它将管理这些事件源,将这些事件反馈给你的程序.为了实现这些,至少要在你的进程(或线程)中执 ...