1. 程式人生 > >banner圖在縮放螢幕的時候始終居中顯示不變形

banner圖在縮放螢幕的時候始終居中顯示不變形

       大家在做專案的時候有沒有遇到一個問題呢    就是一張圖片寬度100%    在縮放螢幕的時候圖片會被壓縮變形!!!那麼怎麼才能實現圖片始終居中而不被壓縮變形呢?  接下來讓我帶領大家解決這個問題   請看程式碼↓↓↓↓↓↓↓

第一步:首先寫出html的demo

<div class='bannerbox'>
  <div class='banner'>
      <img src="../assets/01.jpeg">
   </
div> </div>

第二步:關鍵程式碼當然是css了^_^

.bannerbox { 

                  width:100%; 

                  position:relative; 

                  overflow:hidden; 

                  height:500px;

             } 

          .banner { 

                 width:1920px;/*圖片寬度*/ 

                 position
:absolute; left:50%; margin-left:-960px;/*圖片寬度的一半*/ }