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>

  

css实现不定宽高的图片img居中裁剪_类似微信朋友圈图片效果

资源网站大全 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>

  

 

完结~~~~~~~~~

相关文章