最近在做网站,发现网上有很多这方面的答案和代码,但是要兼容浏览器,很多都不全,整理了下我的代码,希望对别人有所帮助。

<div class="wgImg">
<a href="#"><img src="images/54.jpg" /></a>
</div>

css代码:

/*图片自适应居中*/
.wgImg{width:88px; height:124px; line-height:124px; border:2px solid #fff; overflow:hidden;text-align:center;display:table; }
.wgImg a{display:table-cell;vertical-align:middle;width:88px;height:124px;}
.wgImg a img{ width:88px; display: inline-block; vertical-align: middle; height: auto;
max-width: 100%;
}

/*For IE6 */
*html .wgImg a{position:absolute;top:50%;width:100%;text-align:center;height:auto;display:block;}
*html .wgImg a img{position:relative;top:-50%;left:-50%;width:expression(this.width>88?"84px":"auto");height:expression(this.height>124?"124px":"auto");}
/*=================*/

由于本人电脑上没有ie6,在ie6上没有测试不知道可行不,其他浏览器都ok。

posted on 2014-04-01 13:57  MandyLee  阅读(441)  评论(1编辑  收藏  举报