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

  1. <html>
  2. <head>
  3. <title>Title</title>
  4. <style>
  5. .bannerbox {
  6. width:100%;
  7. position:relative;
  8. overflow:hidden;
  9. height:500px;
  10. }
  11. .banner {
  12. width:1920px; /*图片宽度*/
  13. position:absolute;
  14. left:50%;
  15. margin-left:-960px; /*图片宽度的一半*/
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <div class="bannerbox">
  21. <div class="banner">
  22. <img src="t1.jpg">
  23. </div>
  24. </div>
  25. </body>
  26. </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. yum源的搭建

    1.光盘的挂载 2.先创建一个文件 /aaa 然后挂载mount /dev/cdrom /aaa 进入 /aaa   ls 查看是否挂载OK 3.进入yum文件夹.将除Media以外的所有文件名改为X ...

  2. mysql配置文件编写

    实例: 首先建立 mysql的配置文件 dbconfig.php <?php $phpexcel=array( "host"=>'localhost',//127.0. ...

  3. 第二章 搭建Android开发环境

    这一章为我们讲解了如何搭建Android开发环境. 首先要了解的是Android底层开发需要哪些工具:搭建android应用程序开发环境.android NDK开发环境和交叉编译环境,前两个用来测试L ...

  4. spring实现一对多表单的保存

    现在我已经从ios转行为java了呦吼吼吼~~~ 1.先来一张界面,项目的字段太多了,为了研究知识点我做了个潘长江版的

  5. .net core 学习笔记(4)-ViewComponent

    动态菜单,以前用的是Html.Action(url)来获取的,到了 .net core 中忽然发现没有了这个方法,原来在 .net core 中是提供了个 ViewComponent,有点类似以前的用 ...

  6. 如何解决Selenium中"Cannot find function addEventListener in object [object HTMLDocument]"的错误

    project: blog target: how-to-resolve-cannot-find-function-addEventListener-error-in-selenium.md stat ...

  7. 随感一:android handler传值更改ui

    handler+looper传值更改activity的UI 博客开了一段时间,一直想写点自己的学习经验及体会,等着以后长时间不用再要用到的时候直接拿过来上手.想了想,之前用到handler, 看了几篇 ...

  8. Reverse-Daily(5)-RE_100

    比较简单的一道题目,主要注意方法一 链接:http://pan.baidu.com/s/1c1U8a4K 密码:cnkq 我用了两种方法 方法一: nop掉几处无关的call指令,然后直接运行程序,但 ...

  9. js 正则表达式 转至(七郎's Blog)

    //匹配帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线 var re =new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,19}$"); if( ...

  10. ZOJ 3911 线段树

    题意:有N个数字,M个操作,然后回答每个Q开头的询问 操作形式: A val pos:在pos位置上+val Q l r:询问l~r之间有多少个质数 R val l r:把l~r之间的数字替换成val ...