jquery 图片居中

作者：yaya | 时间：2009年9月30日 | 分类 学海无涯 | 标签 jquery 居中 javascript | 6回复

看到网上有许多图片居中（水平+垂直）的方法。感觉都不错。

有许多采用的是display:table-cell等的。我觉得这样就完全不顾及IE6的效果。虽然说除IE6其他都表现正常，可是毕竟现在用IE6的人还是很多的。至少网吧就是一个IE6大本营。

除此之外，许多用的是vertical-align:middle，这个IE6下也容易出问题。

其他的选择的方法就感觉复杂了。
 

但是，我想可以弄个简单的方法来完成这个事情吗？

一般写法
  1. .divimg{
  2. height:200px;
  3. width:200px;
  4. border:1px #000 solid;
  5. margin-right:2px;
  6. float:left;
  7. }
  8.  
  9. <div class="divimg">
  10. <img  src="1.jpg" id="img1" alt="1" />
  11. </div>
  12.  
  13. <div class="divimg">
  14. <img  src="2.jpg" id="img2" alt="2" />
  15. </div>
  16.  
  17. <div class="divimg">
  18. <img  src="3.jpg" id="img3" alt="3" />
  19. </div>
  20.  


我希望，就按照这样的写法，而得到下图的效果：



所以我写了个jquery小插件imgC。

imgC
  1. (function($){
  2. $.extend($.fn, {
  3.         imgC: function() {
  4.         var parentHeight = this.parent().height();
  5.         var parentWidth =  this.parent().width();
  6.         if (parentHeight!==0&&parentHeight!==0){
  7.             var imgSrc = this.attr("src");
  8.             this.attr("src","blank.gif");
  9.             this.css({"background-image":"url("+imgSrc+")","background-repeat":"no-repeat","background-position":"center","width":parentWidth,"height":parentHeight});
  10.          }
  11.         }
  12. });
  13. })(jQuery);

调用时候：

调用
  1. $(document).ready(function(){
  2. $("#img1").imgC();
  3. $("#img2").imgC();
  4. $("#img3").imgC();
  5. });


DEMO地址

  1. 1