图片宽度和高度都大于div,实现图片在div中居中

1,用img标签显示图片时
<style type="text/css">
#out{height:100px; width:150px; position:relative; overflow:hidden;}
#mid{position:absolute;top:50%; left:50%; width:1000px; margin-left:-500px; text-align:center;}
#in{ position:relative; top:-50%;}
</style>
 
<div id="out">
  <div id="mid">
    <div id="in">
    <img src="http://i2.sinaimg.cn/blog/1/2008/0306/U2725P503T1D169F6DT20080822100708.jpg" />
    </div>
  </div>
</div>
 
2,可以把图片当做背景
<style type="text/css">
#odiv {
  width:150px;
  height:100px;
}
#odiv .img{
  display:block;
  width:208px;
  height:143px;
  background:url('http://i2.sinaimg.cn/blog/1/2008/0306/U2725P503T1D169F6DT20080822100708.jpg') no-repeat center top;
}
</style>
<div id="odiv">
  <a class="img" href="#"></a>
</div>
posted @ 2014-07-28 16:07  ShowJoy  阅读(649)  评论(0编辑  收藏  举报