DIV图片垂直居中，且自适应大小

我们经常会遇到上传的图片大小与网页实际显示的大小不搭配，甚至连比例都不一样的情况。

 

这种情况的处理方法一般是：

1)直接定死IMG的宽度、高度

2)上传图片的时候自动生成适合显示的缩略图(裁剪、等比缩放、强制放大/缩小)，等比缩放的时候有的时候还需要进行补白处理

3)样式只定义IMG标签的高度或只定义宽度，让图片自动等比放大/缩小

4)用javascript控制

 

这里就不去比较这几种方法的优缺点了

 

我要介绍的这个方法是用javascript进行控制的，缺点之一是需要为每个IMG标签设置onload事件

 

下面是代码：

 

changeImgSize()有两个参数，一个是IMG标签本身，一个是需要设置的最大宽度、高度

下面的示例是设置图片最大宽度为132px，最大高度为140px，并且图片有边框，边框距离图片要至少有2px(这里是用的div做边框，实际上可以直接给IMG设置border，不过如果要让图片垂直居中，那么最好是用div做边框并且div与img最大高度等高)

var changeImgSize=function(obj,size){ if(size==undefined) size={w:100,h:100,pd:2}; if(size.pd==undefined) size.pd=2; var w=size.w; var h=size.h; if(size.w<1) size.w=1; if(size.h<1) size.h=1; var m=Math.max(obj.offsetWidth/size.w,obj.offsetHeight/size.h); if(m>1){ size.w=obj.offsetWidth/m; size.h=obj.offsetHeight/m; }else{ size.w=obj.offsetWidth; size.h=obj.offsetHeight; } var pdX=pdY=0; pdX=(w-size.w)/2 + size.pd; pdY=(h-size.h)/2 + size.pd; obj.style.width=parseInt(size.w-size.pd*2)+"px"; obj.style.height=parseInt(size.h-size.pd*2)+"px"; obj.style.padding=pdY+"px " + pdX + "px"; }; 

调用示例：

 

<div style="border:#ccc 1px solid;width:135px;height:143px;margin-top:3px; text-align:center;overflow:hidden;"> <img style="vertical-align:middle;" mce_style="vertical-align:middle;" src="http://csdnimg.cn/www/images/csdnindex_logo.gif" mce_src="http://csdnimg.cn/www/images/csdnindex_logo.gif" οnlοad="changeImgSize(this,{w:132,h:140,pd:2});"/> </div>