css實現不定寬高的圖片img居中裁剪_類似微信朋友圈圖片效果

需求如下：

    前端需要顯示矩形的縮略圖，接口返回的圖片尺寸大小不一，寬高不相等，需要前端來處理並顯示成正方形，類似微信朋友圈圖片的效果，等比例正方形顯示在列表中，讓圖片根據寬高來自適應顯示在頁面上。那么使用純css該如何實現不定寬高的圖片居中裁剪呢？

 

mate標簽：

<meta name="viewport" content="width=device-width,user-scalable=no,target-densitydpi=device-dpi" />

　　

 

css代碼：

<style type="text/css">  
    .figure-list{  
      margin: 0;  
      padding: 0;  
    }  
    .figure-list:after{  
      content: "";  
      display: block;  
      clear: both;  
      height: 0;  
      overflow: hidden;  
      visibility: hidden;  
    }  
    .figure-list li{  
      list-style: none;  
      float: left;  
      width: 23.5%;  
      margin: 0 2% 2% 0;  
    }  
    .figure-list figure{  
        border: 1px solid #000;  
      position: relative;  
      width: 100%;  
      height: 0;  
      overflow: hidden;  
      margin: 0;  
      padding-bottom: 100%; /* 關鍵就在這里 */  
      background-position: center;  
      background-repeat: no-repeat;  
      background-size: cover;  
    }  
    .figure-list figure a{  
      display: block;  
      position: absolute;  
      width: 100%;  
      top: 0;  
      bottom: 0;  
    }  
</style>

　　

資源網站大全 https://55wd.com 設計導航https://www.wode007.com/favorites/sjdh

html代碼：

<ul class="figure-list">  
  <li>  
    <figure style="background-image:url(src/fly63前端網.jpg)">  
      <a href="#"></a>  
    </figure>  
  </li>  
  <li>  
    <figure style="background-image:url(src/fly63前端.jpg)">  
      <a href="#"></a>  
    </figure>  
  </li>  
   <li>  
    <figure style="background-image:url(src/fly63前.png)">  
      <a href="#"></a>  
    </figure>  
  </li>  
  <li>  
    <figure style="background-image:url(src/fly63.jpg)">  
      <a href="#"></a>  
    </figure>  
  </li>  
  
   <li>  
    <figure style="background-image:url(src/fly6.jpg)">  
      <a href="#"></a>  
    </figure>  
  </li>  
  <li>  
    <figure style="background-image:url(src/fly.jpg)">  
      <a href="#"></a>  
    </figure>  
  </li>  
</ul>

　　

 

完結~~~~~~~~~