基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中


Posted in Javascript onMay 11, 2014

DIV:

<div class="pic_conent">
<div class=" fn-pr pic_layer">
<!--图片文字介绍透明层-->
<section class="bg text_layer_home p10 font-yahei fn-bc">
   <h2 class="f14 fefefe">${pic.desc}</h2>
<aside class="f12 bbb">
<c:if test="${not empty pic.poi}">
<span class="scenery fn-fl">${pic.poi}</span>
</c:if>
<span class="fn-fr mt10">by ${pic.username}</span>
</aside>
</section>
<img src="${pic.picUrl}" width="320" height="420" />
</div>
</div>

CSS:

.pic_conent{
height: 720px;/*这个高度会被js改掉*/
text-align: center;
display: table-cell;
vertical-align: middle;
}
.pic_layer{text-align:center; width:100%; display:inline-block; vertical-align:middle;}

jquery:

$(function() {
var surH = $(window).height();
$(".pic_conent").height(surH);
window.onresize=function(){
var surH = $(window).height();
$(".pic_conent").height(surH);
}
Javascript 相关文章推荐
JavaScript方法和技巧大全
Dec 27 Javascript
UserData用法总结 lanyu出品
Jul 01 Javascript
div模拟滚动条效果示例代码
Oct 16 Javascript
javascript中的括号()用法小结
Apr 14 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
轻量级javascript 框架Backbone使用指南
Jul 24 Javascript
angular中不同的组件间传值与通信的方法
Nov 04 Javascript
Vue动态获取width的方法
Aug 22 Javascript
vue+element加入签名效果(移动端可用)
Jun 17 Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 Javascript
微信小程序canvas实现签名功能
Jan 19 Javascript
canvas 中如何实现物体的框选
Aug 05 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
May 11 #Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 #Javascript
jquery 按键盘上的enter事件
May 11 #Javascript
jquery.hotkeys监听键盘按下事件keydown插件
May 11 #Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
May 11 #Javascript
基于Jquery实现键盘按键监听
May 11 #Javascript
js判断游览器类型及版本号的代码
May 11 #Javascript
You might like
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
php中的异常和错误浅析
2017/05/03 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
jQuery autocomplete插件修改
2009/04/17 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
vue实例中data使用return包裹的方法
2018/08/27 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
python利用sklearn包编写决策树源代码
2017/12/21 Python
Python安装模块的常见问题及解决方法
2018/02/05 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
彻底理解Python中的yield关键字
2019/04/01 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
英国PC组件和在线电脑商店:SCAN
2019/04/18 全球购物
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
幼儿园毕业教师感言
2014/02/21 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
感恩信:写给爸爸妈妈的一封感谢信
2019/09/12 职场文书
导游词之安徽醉翁亭
2020/01/10 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers