css控制圖片不變形,圖片自動適應

閃耀的瞬間發表於2015-01-03
CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style>
.box{ margin:100px; clear:both;  border:1px solid #000; }
.box ul li{ list-style:none; float:left; width:60px; height:60px; margin-left:10px; text-align:center;  }
.box ul li a{ display:block; background:#f1f1f1; width:60px; height:60px; overflow:hidden; }
.box a img{ margin:-25px 0px 0px -25px; border:0; }
.box a:hover{ width:105px; height:140px; border:4px solid #f2f2f2; margin:-40px -50px -80px -50px; padding:1px; position:relative;  }/* 設定相對定位後才能蓋住後面的層 */
.box a:hover img{ margin:0; border:0;  }
.clear{clear:both;overflow:hidden;height:0;}
</style>
</head>

<body>

<div>原理是：用外面的標籤遮住img</div>

<div class="box" id="boxImg">
<ul>
<li><a href="#"><img src="/list/images/01.jpg" width="270" height="200" ></a></li>
<li><a href="#"><img src="/list/images/02.jpg" width="270" height="200"  ></a></li>
<li><a href="#"><img src="/list/images/03.jpg" width="270" height="200"  ></a></li>
<li><a href="#"><img src="/list/images/04.jpg" width="270" height="200"  ></a></li>
</ul>
<div class="clear"></div>

</div>

<br />

<div>下面的一樣,用a標籤遮住,圖片自動適應</div>

<a href="#" style="display:block; background:#f2f2f2; width:670px; height:350px; overflow:hidden;">
<img src="/upload/photo/2014/12/10.jpg" >
</a>

</body>
</html>
</html>

相關文章