/*
* 经典版,第一次看到的是在一个淘宝的面试题上.
*/
<style type="text/css">
.main{width:500px;height:400px;margin:100px auto 0 auto;}
.imgbox{width:500px;height:400px;display:table-cell;vertical-align:middle;background:#CCC;text-align:center;overflow:hidden;*display:block;*font-size:350px;*font-family:Arial;}
.imgbox img{*vertical-align:middle;}
</style>
<div class="main">
<div class="imgbox">
<img src="img/i01.jpg" width="200" height="200" />
</div>
</div>
/*
* 这个是改进版,结构更简单,图片超出外框能正确overflow.如果你发在FF上预览图片你可以找到这里相识的代码.
*/
<style type="text/css">
.main{width:500px;height:400px;position:relative;margin:100px auto 0 auto;background:#CCC;text-align:center;overflow:hidden;*font-size:350px;*font-family:Arial;}
.main img{position:absolute;margin:auto;top:0;left:0;right:0;bottom:0;*position:static;*vertical-align:middle;}
</style>
<div class="main">
<img src="img/i01.jpg" width="200" height="150" />
</div>