一种让超大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 ...
随机推荐
- excel 转换日期
早上一朋友问我excel中如何将类似这样“19850421”的文本日期转换为“1985-04-21”.我的第一反应就是直接设置单元格格式为日期,于是打开excel试了试结果显示“########### ...
- tar命令的使用
tar格式,会打包成一个文件,可以对多个目录,或者多个文件进行打包 tar命令只是打包,不会压缩,打包前后大小是一样的 tar命令 -c //打包 -x //解压 -f //指定文件 ...
- jQuery专题
jQuery概述 ·为了简化JavaScript的开发,一些JavaScript库诞生了.JavaScript库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互的Web2.0特性的富客户 ...
- css3弹性盒子温习
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成. 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器. 弹性 ...
- linux-yum
yum - Yellowdog Updater Modified 简介: Yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中 ...
- Alpha版使用说明书
游戏规则: 玩家是黑色的小煤球哦! 通过方向键或者ASDW,来控制小球移动(上.下.左.右). 累计时间,直到碰到了红色的小球 ...
- cocos2d-x 3.0 事件分发机制
在cocos2d-x 3.0中一共有五个事件监听器: 触摸事件(EventListenerTouch) 键盘响应事件 (EventListenerKeyboard) 加速器记录事件(EventList ...
- 什么是java?
Java是一种软件技术 是一种由美国SUN计算机公司(Sun Microsystems, Inc.)所研究而成的语言 是一种为 Internet发展的计算机语言 是一种使网页(Web Page) ...
- SqlServer性能优化 性能调控(十)
如何做资源的调控: 1.建立资源池. 2.创建工作负荷组 create resource pool ImporPool with ( min_cpu_percent=30,max_cpu_percen ...
- mysql登录不了及修改密码
安装mariadb,默认是无密码的,但一般是指要设置密码的.在设置密码时出现各种问题,可能还是不太明白其原理. 一下我尝试了两种方法,但都失败了.下面这两个是我尝试的方法: 一.网上最多的方法是 1. ...