最近在做网站,发现网上有很多这方面的答案和代码,但是要兼容浏览器,很多都不全,整理了下我的代码,希望对别人有所帮助。
<div class="wgImg">
<a href="#"><img src="images/54.jpg" /></a>
</div>
css代码:
/*图片自适应居中*/
.wgImg{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;88px;height:124px;}
.wgImg a img{ 88px; display: inline-block; vertical-align: middle; height: auto;
max- 100%;
}
/*For IE6 */
*html .wgImg a{position:absolute;top:50%;100%;text-align:center;height:auto;display:block;}
*html .wgImg a img{position:relative;top:-50%;left:-50%;expression(this.width>88?"84px":"auto");height:expression(this.height>124?"124px":"auto");}
/*=================*/
由于本人电脑上没有ie6,在ie6上没有测试不知道可行不,其他浏览器都ok。