基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
更新时间：2014年05月11日 12:33:04 作者：
这篇文章主要介绍了基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中的方法,需要的朋友可以参考下
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);
}
您可能感兴趣的文章:
相关文章
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效，十分的实用，也非常方便大家对比学习原生js和jQuery，有需要的小伙伴可以参考下。2015-04-04
这篇文章主要介绍了jQuery中offsetParent()方法用法,实例分析了offsetParent()方法的功能、定义及返回匹配元素所有祖先元素中第一个采用定位的祖先元素时的使用技巧,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了jQuery修改DOM结构的相关知识，需要的的朋友参考下吧2017-07-07
本文给大家分享的是使用javascript实现的七夕情人节丘比特射箭小游戏的代码，并附上源码下载，谁说程序猿就不懂得浪漫呢，小伙伴们感觉拿去献宝吧（当然了，首先你得有女票才行^_^）2015-08-08
本文主要给大家讲述的是如何使用jquery+easeing实现仿flash的载入动画的方法，附上示例代码，非常细致全面，这里推荐给大家，希望对大家熟练使用jQuery有所帮助。2015-03-03
这篇文章主要介绍了jquery限定文本框只能输入数字，包括整数和小数，感兴趣的小伙伴们可以参考一下2016-01-01
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
这篇文章主要介绍了jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate),需要的朋友可以参考下2014-05-05
jQuery实现分页功能（含ajax请求、后台数据、附完整demo）
这篇文章主要给大家介绍了关于jQuery实现分页功能的相关资料，主要包含ajax请求和后台数据，文末给出了完整的demo示例，对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。2017-04-04
这篇文章主要介绍了jQuery与getJson结合的用法,实例分析了jquery解析json数据及数组遍历的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
input 和 textarea 输入框最大文字限制的jquery插件
input 和 textarea 输入框最大文字限制的jquery插件，需要的朋友可以参考下。2011-10-10
最新评论