一种让超大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 ...
随机推荐
- html5/css学习笔记
请始终将正斜杠添加到子文件夹.假如这样书写链接:href="http://www.w3cschool.cc/html",就会向服务器产生两次 HTTP 请求.这是因为服务器会添加正 ...
- 华为手机调试显示log日志
华为手机默认状态手机log为关闭状态,所以看不到详细错误信息. 手机拨号*#*#2846579#*#*,进入projectmenu--后台设置--LOG设置--LOG开关--打开 勾选AP日志 C ...
- 《C++primer》v5 第4章 表达式 读书笔记 习题答案
4.1 105 4.2 *vec.begin()=*(vec.begin())//先调用点运算符,再解引用 *vec.begin()+1=(*vec.begin())+1//先解引用,再加一 4.3略 ...
- Angular【学习笔记】
1.angular入门网站 感谢@菜鸟教程:http://www.runoob.com/angularjs/angularjs-tutorial.html 学习笔记:
- Math.abs(~2018)，掌握规律即可！
Math.abs(~2018) 某前端群的入门问题长姿势了,一个简单的入门问题却引发了我的思考,深深的体会到自己在学习前端技术的同时忽略遗忘了一些计算机的基础知识. 对于 JS Math对象没什么可说 ...
- cocoapod安装过程中的幺蛾子
cocoapod是GoogleMobileAd framework推荐的一个自动解决依赖关系的工具. 安装cocoapod时遇到问题: EthandeMacBook-Air:Xcode ethan ...
- job console部署
1. iis配置 1.1 应用程序池配置成经典模式 1.2 增加mini类型.svc,application/octet-stream 1.3 增加脚本映射,*.svc,%windir%\Micros ...
- Jsonp理论实例代码详解
什么是Json?JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于JavaScript(Standard ECMA-262 3rd Edition - ...
- ubuntu卸载安装mysql
安装(转自http://www.cnblogs.com/xz1024/p/5802637.html): deb安装: 一.下载MySQL 到mysql网站下载相应的mysql安装包,我的mysql-s ...
- Android 标题栏菜单设置与应用（popupWindow的应用）
效果图