图片垂直居中

chujiazhen

浏览: 16865 次
性别:
来自: 河南郑州

最近访客更多访客>>

18616231631

zhangqinghao9203

zysj2012

yuhxuan

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Jquery

CSS HTML

tips:
一、 $(window).load(function(){ ... }) 与 $(document).ready(function(){...})
DOM加载完后加载新的图片会改变原有的div的大小
二、图片宽度、高度一个变,另一个自动变
三、 padding顺序：上右下左，中间空格

center.js :
/*
*@(#) vcenter.js 图片垂直居中
* @author cjz
* @version 1.0 2010-01-25
* @param parentWidth 外层宽度
* @param parentHeight 外层高度
*/
$.fn.vcenter = function(parentWidth,parentHeight){ //图片垂直居中
var __percent = Math.max($(this).width()/parentWidth,$(this).height()/parentHeight); // 缩放比例
$(this).width($(this).width()/__percent); //宽度、高度一个变,另一个自动变
var __xpadding = (parentWidth - $(this).width())/2;
var __ypadding = (parentHeight - $(this).height())/2;
$(this).css("padding",__ypadding+"px " + __xpadding + "px")
}

picTest.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Insert title here</title>
<script type="text/javascript" src="http://image.xxt.cn/common/js/jquery.js"></script>
<script type="text/javascript" src="vcenter.js"></script>
<script type="text/javascript">
$(window).load(function(){
$("img").each(function(){
$(this).vcenter(200,200)
});
})
</script>
<style type="text/css">
.img_box{border:1px solid #e4e4e4;width:200px;height:200px;font-size:86px;background:#fff;line-height:200px;text-align:center;margin:0 auto 3px auto;}
.img_box img{vertical-align: middle;}
</style>
</head>
<body>
<div class="img_box">
<img src="*1.jpg" alt="查看相册" title="查看相册" border="0" >
</div>
<div class="img_box">
<img src="*2." alt="查看相册" title="查看相册" border="0" >
</div>
</body>
</html>

分享到：