css筆記:CSS顯示圖片中間區域


css在不改變圖片尺寸情況下在固定容器內顯示圖片的中間區域 
下面三種方法: 

<div style="width:100px;height:100px;> <img src="1.jpg" width="500" height="300" alt="" style="margin-top:-150px;margin-left:-250px;" /> </div>
  • 1
  • 2
  • 3

②作為容器的背景圖片

<div style="width:100px;height:100px;background:url(1.jpg) no-repeat center center"> </div>
  • 1
  • 2

③ 
相對定位絕對定位,設置left,top的值

<div class="div1"> <img src="1.jpg" width="500" height="300" alt="" /> </div> <style> .div1{width:100px;height:100px;position:relative;} .div1 img{widht:500px;height:300px;position:absolute;left:-250px;top:-150px;} </style>

轉載自:http://blog.csdn.net/Miss_Audrey/article/details/53544763


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM