一種讓超大banner圖片不拉伸、全屏寬、居中顯示的方法


現在很多網站的Banner圖片都是全屏寬度的,這樣的網站看起來顯得很大氣。這種Banner一般都是做一張很大的圖片,然后在不同分辨率下都是顯示圖片的中間部分。實現方法如下:

<html>  
   <head>  
       <title>Title</title>  
       <style>  
           .bannerbox {  
               width:100%;  
               position:relative;  
               overflow:hidden;  
               height:500px;  
           }  
           .banner {  
               width:1920px; /*圖片寬度*/  
               position:absolute;  
               left:50%;  
               margin-left:-960px; /*圖片寬度的一半*/  
           }  
       </style>  
   </head>  
   <body>  
       <div class="bannerbox">  
           <div class="banner">  
               <img src="t1.jpg">  
           </div>  
       </div>   
   </body>  
   </html>  

把css中 .bannerbox 中 height 及 .banner 和 width 換成你banner圖的大小,然后 .banner 中margin-left 的值改成banner圖寬度的一半即可。


免責聲明!

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



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