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

附：

1. 使用相对定位

html代码

<div class="wrap">

<div class="banner"><img src="img1.jpg"/></div>

</div>

css代码

.wrap{width:100%;overflow:hidden;}

.banner{width:1920px;margin-left:-960px;left:50%;position:relative;}

效果

2.使用绝对定位

html代码

<div class="bannerbox">

<div class="banner">

<img src="img1.jpg">

</div>

</div>

css代码

.wrap { width:100%;position:relative; overflow:hidden; height:470px; }

.banner {width:1920px;position:absolute;  left:50%; margin-left:-960px;}

效果

转载 | 一种让超大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. 深入理解Java虚拟机笔记——虚拟机类加载机制

    目录 概述 动态加载和动态连接 类加载的时机 类的生命周期 被动引用 例子一(调用子类继承父类的字段) 例子二(数组) 例子三(静态常量) 类加载的过程 加载 验证 准备 解析 符号引用 直接引用 初 ...

  2. HDU XXXX：求[L,R]的素数数量（数位DP）

    Problem G Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 131072/131072K (Java/Other) Total S ...

  3. iOS组件化开发一pod库包含MRC的文件处理（五）

    在做项目的过程中,建立了一个私有pod库,在这个库中存在mrc类文件这个时候如果在使用了arc的工程中引用这个pod的工程中手动设置当然也可以就是费时费力.现在我们来看看如何在私有库配置文件里配置自动 ...

  4. 基数排序的可复用实现（C++11/14/17/20）

    基数排序,是对整数类型的一种排序方法,有MSD (most significant digit)和LSD (least significant digit)两种.MSD将每个数按照高位分为若干个桶(按 ...

  5. Linux命令学习-mkdir命令

    Linux中,mkdir命令的全称是make directory,即创建目录的意思. 假设当前处于wintest用户的主目录,路径为 /home/wintest ,存在文件夹testA,进入testA ...

  6. Markdown下，上传图片问题

    最简单的方法: 1,登录qq 2,登录博客园,并打开博客园添加随笔的地方:如图: 3,选择需要截屏的地方,按住ctrl+alt+A截屏,然后在qq的发送栏内贴过去 4,鼠标左键按住不松开,然后拖到这里 ...

  7. 小白教程 Java web maven项目Windows下部署阿里云服务器全过程（买服务器，打包项目，连接服务器，配置服务器，部署项目）

    -------------首先:购买服务器---------------- Step1: 在https://www.aliyun.com/?utm_content=se_1043015注册登录阿里云 ...

  8. Bzoj 2058: [Usaco2010 Nov]Cow Photographs 题解

    2058: [Usaco2010 Nov]Cow Photographs Time Limit: 3 Sec  Memory Limit: 64 MBSubmit: 190  Solved: 104[ ...

  9. [记录]NGINX配置HTTPS性能优化方案一则

    NGINX配置HTTPS性能优化方案一则: 1)HSTS的合理使用 2)会话恢复的合理使用 3)Ocsp stapling的合理使用 4)TLS协议的合理配置 5)False Start的合理使用 6 ...

  10. [原创]wireshark&xterm安装、配置和使用

    --wireshark && xterm--一.安装wireshark: #apt-get install wireshark二.启动wireshark: #wireshark 或者 ...