标签：资源 http type 矩形 代码 mat targe isp pre
需求如下：
前端需要显示矩形的缩略图，接口返回的图片尺寸大小不一，宽高不相等，需要前端来处理并显示成正方形，类似微信朋友圈图片的效果，等比例正方形显示在列表中，让图片根据宽高来自适应显示在页面上。那么使用纯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>
完结~~~~~~~~~
css实现不定宽高的图片img居中裁剪_类似微信朋友圈图片效果
标签：资源 http type 矩形 代码 mat targe isp pre
原文地址：https://www.cnblogs.com/ypppt/p/13258312.html
