图片自适应div比例缩放上下左右居中

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

<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。

转载于:https://www.cnblogs.com/MandyLee/p/3638135.html