基于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);
}
您可能感兴趣的文章:
相关文章
JQuery 绑定事件时传递参数的实现方法，需要的朋友可以参考下。2009-10-10
昨天看了妙味课堂的倒计时视频，自己学着写了下，需要的朋友可以参考下2012-05-05
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；例如$("#img").attr("src","test.jpg"); 这里的$("#img")就是jQuery对象；2010-03-03
Pinterest使用一种新的方式布局取得成功之后，们把他叫做瀑布流，国内现有美丽说，蘑菇街，花瓣等代表的网站接下来为你介绍一个juqery的插件masonry的使用，感兴趣的你可以参考下哈2013-03-03
这篇文章主要为大家详细介绍了jquery实现简单的swiper轮播预览原图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
在京东商城浏览时, 会发现产品图片只显示了一屏, 当页面向下滚动时下面的产品图片才逐渐加载.2010-06-06
AJAX 流行之后，总想好好学习一下。但是众多的框架实在难以选择。说明一下 ASP.NET AJAX 并不包括在 AJAX 框架之中。2009-11-11
本篇文章主要是对判断jQuery当前元素是隐藏还是显示的示例代码进行了介绍，需要的朋友可以过来参考下2016-11-11
本节主要介绍两点：1.缓存问题 2.中文问题2011-10-10
刚开始学jQuery，于是想试试学习效果，所以就做了个这个TextBox自动完成条，练习练习。请牛人们别笑话。2009-07-07
最新评论