现在很多网站的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. POJ 1651：Multiplication Puzzle（区间DP）

    http://poj.org/problem?id=1651 题意:给出n个数字,每取中间一个数,就会使得权值加上中间这个数和两边的乘积,求取剩两个数最少的权值是多少. 思路:区间dp. 一开始想了挺 ...

  2. 解决 Prometheus 不能获取 Kubernetes 集群上 Windows 节点的 Metrics

    背景 接上一篇 快速搭建 Windows Kubernetes , 我们发现原来在 Windows Kubernetes 会有一些与在 Linux 上使用不一样的体验,俗称坑,例如 hostAlias ...

  3. 小代学Spring Boot之数据源

    想要获取更多文章可以访问我的博客 - 代码无止境. 经过一天对Spring Boot的研究,小代同学已经对Spring Boot框架有了一个大概的认识.并且还创建了一个简单的Spring Boot的W ...

  4. 超哥的 LINUX 入门大纲

    前言 “Linux?听说是一个操作系统,好用吗?” “我也不知道呀,和windows有什么区别?我能在Linux上玩LOL吗” “别提了,我用过Linux,就是黑乎乎一个屏幕,鼠标也不能用,不停地的敲 ...

  5. .Net 通过设置Access-Control-Allow-Origin来实现跨域访问

    目录 # 前言 # 为每个API接口单独添加响应头 1.针对 ASP.NET MVC 项目的Controllers 2.针对 ASP.NET Web API项目的Controllers 3.针对ASP ...

  6. Java学习笔记之---static

    Java学习笔记之---static static不能修饰类,局部变量 (一)静态成员的特征 static+属性  静态属性 无论实例化出来多少个对象,都会共用同一块静态空间,类对象共享 静态成员从第 ...

  7. zimg服务器图片数据迁移后，图片404异常的问题解决

    由于zimg特殊的图片存储结构及图片命名规则,其迁移数据应该当相当简单的,仅把对应的存储图片数据的文件夹复制即可.往往简单的东西总会有一些成本在里面,下面是我简单的迁移测试过程中遇到的一些问题,仅供参 ...

  8. 成功解决 org.mybatis.spring.MyBatisSystemException问题！！

    org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.binding.BindingExce ...

  9. Making the Grade (bzoj1592)题解

    问题 A: Making the Grade (bzoj1592) 时间限制: 1 Sec  内存限制: 128 MB 题目描述       FJ打算好好修一下农场中某条凹凸不平的土路.按奶牛们的要求 ...

  10. ISTQB TA - 边界值分析中三值测试法的注意事项

    三值测试法的定义(中文版20150601大纲): 取一个不超过边界.一个在边界上.一个超过边界的值. 这三个值其实还有另外一种叫法,分别是内点.上点和离点. 内点:不超过边界的点 上点:在边界上的点 ...