基于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 相关文章推荐
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
代码精简的可以实现元素圆角的js函数
Jul 21 Javascript
分析Node.js connect ECONNREFUSED错误
Apr 09 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
原生js页面滚动延迟加载图片
Dec 20 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 Javascript
ES2020 新特性(种草)
Jan 12 Javascript
js实现小时钟效果
Mar 25 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 Javascript
关于Vue中$refs的探索浅析
Nov 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程序?
2006/12/08 PHP
8个出色的WordPress SEO插件收集
2011/02/26 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
jquery实现当滑动到一定位置时固定效果
2014/06/17 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
2015/08/10 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
浅谈js原生拖放
2016/11/21 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
微信小程序 五星评价功能的实现
2017/03/09 Javascript
vue better-scroll插件使用详解
2018/01/25 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
Django接受前端数据的几种方法总结
2016/11/04 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
python小项目之五子棋游戏
2019/12/26 Python
Pytorch的mean和std调查实例
2020/01/02 Python
pytorch 多分类问题,计算百分比操作
2020/07/09 Python
基于opencv实现简单画板功能
2020/08/02 Python
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
英国计算机商店:Technextday
2019/12/28 全球购物
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
比较一下entity bean和session bean
2013/12/27 面试题
工厂厂长岗位职责
2013/11/08 职场文书
《口技》教学反思
2014/02/21 职场文书
项目建议书怎么写
2014/05/15 职场文书
施工安全汇报材料
2014/08/17 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
校园广播站开场白
2015/06/01 职场文书
八月迷情观后感
2015/06/11 职场文书
红色经典观后感
2015/06/18 职场文书
SQLServer2019 数据库的基本使用之图形化界面操作的实现
2021/04/08 SQL Server
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android