现在很多网站的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. EL和JSTL专题

    EL简介 EL全名为Expression Language,它原本是JSTL 1.0为方便存取数据所自定义的语言.当时只能在JSTL标签中使用,如下: <c:out value="${ ...

  2. C#方法参数传递机制

    1:value(值传递).ref(引用传递).out(输出传递) ref和out使用效果上面是等效的,它们的区别在于:参数标记为ref,那么必须在调用函数之前初始化参数的值:参数标记为out,调用函数 ...

  3. 虚机centos和本机Windows之间文件的拷贝无法用xftp时用FileZilla也行

    步骤如下: 1.如果Centos没有安装ssh,则需要先安装: 2.查看虚拟机中IP地址,命令如下: ifconfig 3.在windows中安装ftp软件 FileZilla启动软件如图: 6  这 ...

  4. 基于KNN的newsgroup 18828文本分类器的Python实现

    还是同前一篇作为学习入门. 1. KNN算法描述: step1: 文本向量化表示,计算特征词的TF-IDF值 step2: 新文本到达后,根据特征词确定文本的向量 step3 : 在训练文本集中选出与 ...

  5. 算法（第4版）-1.5 案例研究：union-find算法

    问题→ 动态连通性:当程序从输入中读取了整数对p q时,如果已知的所有整数对都不能说明p和q是相连的,那么则将这一对整数写入到输出中.如果已知的数据可以说明p和q 是相连的,那么程序应该忽略p q这对 ...

  6. php大力力：技术排错过程中，关键点总结和心情历程(2015-10-19)

    9:40 2015/10/19技术排错过程中,关键点总结和心情历程 有一个按照标题进行内容分类的函数似乎不起作用,这叫人沮丧. 在页面显示图片地址时候,在源系统和目标系统中,包含图片地址的页面代码格式 ...

  7. python简易爬虫来实现自动图片下载

    菜鸟新人刚刚入住博客园,先发个之前写的简易爬虫的实现吧,水平有限请轻喷. 估计利用python实现爬虫的程序网上已经有太多了,不过新人用来练手学习python确实是个不错的选择.本人借鉴网上的部分实现 ...

  8. _.属性和self.属性，我遇到的那些坑

    只怪当时_.属性和self.属性当时没有研究透,所以为自己掉入坑里埋下了伏笔.下面从我的坑开始说起: 我写了个懒加载,重写了一个数组属性的get方法,在get方法里面创建了一个数组来获取数据,那么调用 ...

  9. Bullet的学习资源（用Doxygen生成API文档）

    Bullet 全称 Bullet Physics Library,是著名的开源物理引擎(可用于碰撞检测.刚体模拟.可变形体模拟),这里将bullet的学习资源整理一下,希望能帮助入门者少走弯路. 看下 ...

  10. 条件随机场(CRF) - 1 - 简介（转载）

    转载自:http://www.68idc.cn/help/jiabenmake/qita/20160530618222.html 首先我们先弄懂什么是"条件随机场",然后再探索其详 ...