现在很多网站的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. C++：为什么unique_ptr的Deleter是模板类型参数，而shared_ptr的Deleter不是？

    为什么unique_ptr的Deleter是模板类型参数,而shared_ptr的Deleter不是? template <class T, class D = default_delete&l ...

  2. html 画圆

    <html> <head> <script type = "text/javascript" src = "https://d3js.org ...

  3. BeautifulSoup中的find，find_all

    1.一般来说,为了找到BeautifulSoup对象内任何第一个标签入口,使用find()方法. 以上代码是一个生态金字塔的简单展示,为了找到第一生产者,第一消费者或第二消费者,可以使用Beautif ...

  4. 《剑指offer》第三十七题（序列化二叉树）

    // 面试题37:序列化二叉树 // 题目:请实现两个函数,分别用来序列化和反序列化二叉树. #include "BinaryTree.h" #include <iostre ...

  5. HDU2017新生赛 找方块

    思路: 先n^3预处理出每个点能到达的(1010串)最上面的行下标. 然后再n^3暴力一下,对于每个点,往左走看能走到哪,边走边更新面积. 代码: #include<bits/stdc++.h& ...

  6. （转）sublime text3 3176激活

    更改hosts:sudo vim /private/etc/hosts 127.0.0.1 www.sublimetext.com 127.0.0.1 license.sublimehq.com 激活 ...

  7. 卸载 PrestaShop 1.7

    PrestaShop 的卸载非常简单: 在你的 Web 服务器上删除所有 PrestaShop 的文件和目录.你可以使用 FTP 客户端,你也可以使用 SSH 工具. 使用数据库工具删除数据库中所有以 ...

  8. php fpm深度解析

    摘自:https://www.cnblogs.com/wanghetao/p/3934350.html 当我们在谈到cgi的时候,我们在讨论什么 最早的Web服务器简单地响应浏览器发来的HTTP请求, ...

  9. 牛客网暑期ACM多校训练营（第三场）DEncrypted String Matching fft

    题意:给你一个解密后的字符串,给你加密方式,加密过程可能出错,字符可能加减1,然后给你一个字符串,要求匹配个数(其实我也不太懂具体怎么加密解密,反正你把给你的前两个字符串用第三个加密一下,然后搞可以有 ...

  10. zzuli2130卡时bfs题

    https://acm.zzuli.edu.cn/zzuliacm/problem.php?id=2130 2130: hipercijevi Time Limit: 1 Sec  Memory Li ...