现在很多网站的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. Mac OS下 selenium 驱动safari日志

    /Library/Java/JavaVirtualMachines/jdk1.8.0_171.jdk/Contents/Home/bin/java "-javaagent:/Applicat ...

  2. Qt5.3.2_CentOS6.4_x86_编程调试环境【勿删，简洁】

    ZC:使用的虚拟机环境是:博客园VMwareSkill 的 “CentOS6.4x86EngCustomize120g__20160307.rar” 1. For Qt5.3.2: 基本需要的 软件包 ...

  3. Knight Probability in Chessboard

    2018-07-14 09:57:59 问题描述: 问题求解: 本题本质上是个挺模板的题目.本质是一个求最后每个落点的数目,用总的数目来除有所可能生成的可能性.这种计数的问题可以使用动态规划来进行解决 ...

  4. 深入理解Java中配置环境变量

    深入理解Java中配置环境变量 配置的目的: 本来只在安装JDK的bin目下能运行java.exe,javac.exe,jar.exe,javadoc.exe等Java开发工具包命令,我们现在想让在所 ...

  5. spring boot：创建一个简单的web(maven web project)

    1.新建一个maven web project; 2.在pom.xml文件中添加相应的依赖包: 3.新建一个HelloController请求控制类: 4.编写index.jsp页面: 5.编写启动类 ...

  6. Knapsack CodeForces - 1132E (多重背包)

    可以将大量同种物品合并为$lcm$来优化, 复杂度$O(nlcm^2)$, 好像可以用bitset优化到$O(nlcm^2/\omega)$, 但是没看太懂 const int L = 840, M ...

  7. mysql导入导出数据过大命令

    phpmyadmin 导入或者导出都是有限制的,当导入或者导出的数据会报错. 1.导入数据库 mysql -u root -p<备份文件的保存路径 eg: mysql -u root -p &l ...

  8. CSS样式属性——背景

     背景——包括背景颜色.背景图片,以及背景图片的控制 background-color:设置背景色(transparent表示透明的背景色) background-image:设置元素的背景图片 ba ...

  9. Eclipse Indigo 3.7.0 安装GIT插件

    Eclipse上安装GIT插件EGit 首先打开Eclipse,然后点击Help>Install New Software>Add. Name:EGit Location: http:// ...

  10. vue-cli的安装及使用

    一.    node 和npm 1.在安装vue-cli前,要确认自己的电脑是否安装了node和npm 2.查询版本如下(vue脚手架支持node@4.xx以上) node -v    查询node版 ...