jQuery实现图片垂直居中，js怎样实现图片水平垂直居中显示

转载地址http://www.wgcss.com/?p=32

做完一个项目，测试那边提出一个问题，就是用户上传的头像，可能形状不同， 可能长比宽要大，也有可能宽比长要大，但，外面的框是固定的（不然会打乱布局的哦）。

<div class="box"> <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg"></div>

现在问题出来了，要是用户所传的图片比我们定死的外框要大怎么办， 用CSS把IMG定死？ 这样会直接导致图片变形。这就要想法让图片等比例缩放了。
有人提出过，用CSS，只设宽或高， 这样是可以等比例缩小。这是指的设死宽或高也就是指的我们定死的外框的宽或高。但这样要是用户所传的图片比外框本来就小怎么办？ 那样就会拉伸图片，照样会变形！
这个问题暂且在此不谈，因为我也还在求解中，有哪位大侠有正解，请给出答案，感激不尽。
我今天主要是谈等比例缩小，并且垂直居中的方法！
等比例缩小，可以用上面的只定义宽或高来实现，但垂直居中还要另想他法。 网上的用CSS来实现的例子。有一个，我感觉不错。
在此贴出来，供大家学习交流。
代码如下：

    .box {/*非IE的主流浏览器识别的垂直居中的方法*/      display: table-cell;      vertical-align:middle;      /*设置水平居中*/      text-align:center;      /* 针对IE的Hack */      *display: block;      *font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/      *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/      width:200px;      height:200px;      line-height:200px;/*蜈蚣注：如果不涉及文字，用line-height是最简单的方法*/      border: 1px solid #eee;      }      .box img {      /*设置图片垂直居中*/      vertical-align:middle;      }   

    <div class="box"> <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg"></div>  

但这里有个不好的地方，就是如果box左浮动了，FF居中就会失灵。
加*float:left;可以解决。但往往我们在做项目的时候，不光是IE要浮动，FF也浮动。这样此方法就不太好了！
我们老大（我的组长）， 给出了一个方法，Jquery的。 贴出他的成果， 哈哈，希望老大不要怪我。
JQ代码：

    function drawpic(dom){      var _img=$(dom);      if(_img.width() > _img.height())//如果图片的宽大于高      {      _img.css("width","100%"); // 将图片的宽定义成100%      var c=(_img.height()/2); // 定义一变量C，将图片的高度值的一半赋于C。      _img.css({"top":"50%","margin-top":-c+"px"});// 给图片定义，top:50%; margin-top:-c;      /*----------------------------------------------------------------------------------------------------------     在此我讲一下原理，图片的宽大于高，也就是说是图片是横着的，哈哈，不知道这     样说，大家能理解不。定义它的宽度是100%。这里是相对于外框的，也就是将图     片的宽度设成外框的宽度，然后定义图片top:50%;这样，图片的左上角那个点就是     外框的正中间，然后让图片margin-top一个自身的高度值，这样就实现了居中。     ----------------------------------------------------------------------------------------------------------*/      }      else      {      _img.css({"height":"100%","margin":"0 auto"});      /*----------------------------------------------------------------------------------------------------------     如果，图片高大于宽，也就是竖着的，这样，将图片高度设成外框的100%。宽度会     自动等比例缩小，然后让图片，margin:0 auto;     ----------------------------------------------------------------------------------------------------------*/      }      }  

用以上方法实现的前提是，外框的宽和高是定死的。还有，在CSS中，让图片，display:block; position:relative;
不然对图片，margin:0 auto;top:50% 没用哈。
在此，我提出一个疑问，同样是如果用户上传的图片要是小外框的时候，这个方法会将图片同样拉伸变形，明天我问问老大，
有了结果再写出来，大家如果有好的办法，也请不吝赐教