需求如下：

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

mate標簽：

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;

}

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

html代碼：

完結~~~~~~~~~

總結

以上是生活随笔為你收集整理的canva画图 图片居中裁剪_css实现不定宽高的图片img居中裁剪_类似微信朋友圈图片效果...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。