在前端網頁製作的過程中，圖片的處理往往比較頭疼，當然不考慮你有很給力的美工後援的情況下。以下將對一些常見的CSS圖片處理需求情況進行分析：

1、一張圖片要放在固定寬高的內容塊中，並填充滿整個內容塊（看起來整齊劃一）

我們假設要把一張大小為1920*1200的圖片放在400*400的內容塊中，由於這時圖片是長大於寬的，為了保證圖片看起來不被壓縮，可以固定寬度，從圖片中間向左右兩側裁剪以保留圖片的核心內容。如下圖所示（左圖為原圖，右圖則為實際顯示在400*400內容內的圖片內容）

HTML程式碼：

  

   

    
     
    
    
     
      <div
 
 class="cover">
     
    
   

    
     
    
    
         
      <img src="img/cover.jpg"/>
     
    
   

    
     
    
    
     
      </div>
     
    
  
  

  

   

    
     
    
    
     
      img
     
    
   

    
     
    
    
     
      {
     
    
 

   

    
     
    
    
     	
      height: 
      100%;
     
    
   

    
     
    
    
     	
      width: auto;
     
    
   

    
     
    
    
     	
      left:
      50%;
     
    
   

    
     
    
    
     	
      position: relative;
     
    
   

    
     
    
    
     	
      -webkit-transform
 
: 
      translateX(-50%);
     
    
   

    
     
    
    
     	
      -ms-transform: 
      translateX(-50%);
     
    
   

    
     
    
    
     	
      -moz-transform: 
      translateX(-50%);
     
    
   

    
     
    
    
     
      }
     
    
   

    
     
    
    
     
      .cover
     
    
   

    
     
    
    
     
      {
     
    
   

    
     
    
    
     	
      margin:
      100px auto;
     
    
   

    
     
    
    
     	
      width: 
      400px;
     
    
   

    
     
    
    
     	
      height: 
      400px;
     
    
   

    
     
    
    
     	
      overflow: hidden;
     
    
   

    
     
    
    
     	
      border: 
      1px solid cornflowerblue;
     
    
   

    
     
    
    
     	
      position: relative;
     
    
   

    
     
    
    
     
      }
     
    
  
  

若原始圖片大小為683*984，即長小於寬，為了保證圖片看起來不被壓縮，可以固定長度，從圖片中間向上下兩端裁剪以保留圖片的核心內容。如下圖所示（左圖為原圖，右圖則為實際顯示在400*400內容內的圖片內容）

CSS程式碼：

  

   

    
     
    
    
     
      img
     
    
   

    
     
    
    
     
      {
     
    
   

    
     
    
    
             
      width: 
      100%;
     
    
   

    
     
    
    
     	
      height: auto;
     
    
   

    
     
    
    
     	
      top:
      50%;
     
    
   

    
     
    
    
     	
      -webkit-transform: 
      translateY(-50%);
     
    
   

    
     
    
    
     	
      -ms-transform: 
      translateY(-50%);
     
    
   

    
     
    
    
     	
      -moz-transform: 
      translateY(-50%);
     
    
   

    
     
    
    
     	
      position: relative;
     
    
   

    
     
    
    
     
      }
     
    
  
  

CSS程式碼：

  

   

    
     
    
    
     
      .jumbotron
     
    
   

    
     
    
    
     
      {
     
    
   

    
     
    
    
     	
      padding: 
      0;
     
    
   

    
     
    
    
     	
      background-image: 
      url(../img/cover.jpg);
     
    
   

    
     
    
    
     	
      background-position: center center; 
     
    
   

    
     
    
    
     
      }
     
    
  
  

PS：以後遇到更多的CSS圖片處理問題還會繼續更新~小夥伴們敬請期待 :)