一种让超大banner图片不拉伸、全屏宽、居中显示的方法
现在很多网站的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图片不拉伸、全屏宽、居中显示的方法的更多相关文章
- [转]一种让超大banner图片不拉伸、全屏宽、居中显示的方法
现在很多网站的Banner图片都是全屏宽度的,这样的网站看起来显得很大气.这种Banner一般都是做一张很大的图片,然后在不同分辨率下都是显示图片的中间部分.实现方法如下: <html> ...
- 转载 | 一种让超大banner图片不拉伸、全屏宽、居中显示的方法
现在很多网站的Banner图片都是全屏宽度的,这样的网站看起来显得很大气.这种Banner一般都是做一张很大的图片,然后在不同分辨率下都是显示图片的中间部分.实现方法如下: <html> ...
- jQuery10种不同动画效果的响应式全屏遮罩层
遮罩层有很多今天介绍这个jQuery10种不同动画效果的响应式全屏遮罩层 效果预览 下载地址 实例代码 <div class="container"> <head ...
- 可嵌入图片视频jQuery全屏滑块
分享一款可嵌入图片视频jQuery全屏滑块.这是一款可定制的滑块幻灯片代码,支持键盘箭头切换.效果图如下: 在线预览 源码下载 实现的代码. html代码: <script type ...
- iOS 图片的拉伸,取固定区域显示
1.图片拉伸合适的尺寸 以及清晰度 UIButton * but =[[UIButton alloc]initWithFrame:CGRectMake(, , , )]; //拉伸 /*UIImage ...
- 设置ImageView显示的图片铺满全屏
转自:http://m.blog.csdn.net/blog/wjwj1203/32334459 为适应不同屏幕的手机,ImageView显示的图片可能不铺满屏幕,如果定高的话,两边可能会出现空白 ...
- Android中两种设置全屏或者无标题的方法
在开发中我们经常需要把我们的应用设置为全屏或者不想要title, 这里是有两种方法的,一种是在代码中设置,另一种方法是在配置文件里改: 一.在代码中设置: package jason.tutor; i ...
- Java_Swing中让窗口居中显示的方法(三种方法)
方法一: int windowWidth = frame.getWidth(); // 获得窗口宽 int windowHeight = frame.getHeight(); // 获得窗口高 ...
- IOS中实现图片点击全屏预览
//// ViewController.m// XWZoomImageView//// Created by xiao on 15/11/13.// Copyright © 2015年 xiao. A ...
随机推荐
- yum源的搭建
1.光盘的挂载 2.先创建一个文件 /aaa 然后挂载mount /dev/cdrom /aaa 进入 /aaa ls 查看是否挂载OK 3.进入yum文件夹.将除Media以外的所有文件名改为X ...
- mysql配置文件编写
实例: 首先建立 mysql的配置文件 dbconfig.php <?php $phpexcel=array( "host"=>'localhost',//127.0. ...
- 第二章 搭建Android开发环境
这一章为我们讲解了如何搭建Android开发环境. 首先要了解的是Android底层开发需要哪些工具:搭建android应用程序开发环境.android NDK开发环境和交叉编译环境,前两个用来测试L ...
- spring实现一对多表单的保存
现在我已经从ios转行为java了呦吼吼吼~~~ 1.先来一张界面,项目的字段太多了,为了研究知识点我做了个潘长江版的
- .net core 学习笔记(4)-ViewComponent
动态菜单,以前用的是Html.Action(url)来获取的,到了 .net core 中忽然发现没有了这个方法,原来在 .net core 中是提供了个 ViewComponent,有点类似以前的用 ...
- 如何解决Selenium中"Cannot find function addEventListener in object [object HTMLDocument]"的错误
project: blog target: how-to-resolve-cannot-find-function-addEventListener-error-in-selenium.md stat ...
- 随感一:android handler传值更改ui
handler+looper传值更改activity的UI 博客开了一段时间,一直想写点自己的学习经验及体会,等着以后长时间不用再要用到的时候直接拿过来上手.想了想,之前用到handler, 看了几篇 ...
- Reverse-Daily(5)-RE_100
比较简单的一道题目,主要注意方法一 链接:http://pan.baidu.com/s/1c1U8a4K 密码:cnkq 我用了两种方法 方法一: nop掉几处无关的call指令,然后直接运行程序,但 ...
- js 正则表达式 转至(七郎's Blog)
//匹配帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线 var re =new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,19}$"); if( ...
- ZOJ 3911 线段树
题意:有N个数字,M个操作,然后回答每个Q开头的询问 操作形式: A val pos:在pos位置上+val Q l r:询问l~r之间有多少个质数 R val l r:把l~r之间的数字替换成val ...