canva画图图片居中裁剪_css实现不定宽高的图片img居中裁剪

需求如下：

前端需要显示矩形的缩略图，接口返回的图片尺寸大小不一，宽高不相等，需要前端来处理并显示成正方形，类似微信朋友圈图片的效果，等比例正方形显示在列表中，让图片根据宽高来自适应显示在页面上。那么使用纯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居中裁剪_类似微信朋友圈图片效果...相关推荐

使用photoview+viewpager实现图片缩放切换（类似微信朋友圈图片查看）
首先看一下最终效果经过分析可知,整个页面布局应该是一个Listview,它的每一个条目item中包含原型头像(采用CircleImageVIew)一个数目可变的GridView和其他,Gridvie ...
安卓android按宽/高缩放图片到指定大小并进行裁剪得到中间部分图片
/*** 按宽/高缩放图片到指定大小并进行裁剪得到中间部分图片 <br>* 方法名:zoomBitmap <br>* 创建人:楼翔宇 <br>* 创建时间: ...
Android仿微信朋友圈图片展示效果,图片查看器
现在越来越多的APP都会有图片展示,这里是模仿微信朋友圈图片展示效果,图片查看器. 主要分为4部分: 1.透明Activity 2.计算gridView下iamgeView Item所在位置 3.一张 ...
ctf 改变图片高度_通过CRC32爆破修改图片的宽高 ctf-misc图片隐写
** 一.在处理图片隐写题的时候,可能会修改图片原有的宽高,导致图片里面的内容无法正常显示,那么怎么判断它的宽高是否被修改了呢? ** 1.把图片拖进010editor中会发现左下角提示CRC不匹配, ...
不定宽高的DIV，垂直水平居中
1.怎么让一个不定宽高的DIV,垂直水平居中? 答:1)使用CSS方法. 父盒子设置: display:table-cell; text-align:center; vertical-align:mi ...
不定宽高，实现盒子左右垂直居中
html <div class="container"><div class="box">不定宽高实现左右垂直剧中</div> ...
安卓开发仿微信图片拖拽_Android仿微信朋友圈图片浏览器（支持图片手势缩放，拖动）...
[实例简介] Android仿微信朋友圈图片浏览器(支持图片手势缩放,拖动) [实例截图] [核心代码] ImageDemo-2014-02-18 └── ImageDemo-2014-02-18 ├ ...
通过CRC32爆破修改图片的宽高 ctf-misc图片隐写
** 一.在处理图片隐写题的时候,可能会修改图片原有的宽高,导致图片里面的内容无法正常显示,那么怎么判断它的宽高是否被修改了呢? ** 1.把图片拖进010editor中会发现左下角提示CRC不匹配, ...
类微信朋友圈图片放大效果，点击图片放大动画
要用到的就是坐标转换方法 - (CGRect)convertRect:(CGRect)rect toView:(UIView *)view; 1:我这里演示的是 tableviewHeader上子v ...

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

canva画图图片居中裁剪_css实现不定宽高的图片img居中裁剪_类似微信朋友圈图片效果...相关推荐

最新文章

热门文章

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

canva画图 图片居中裁剪_css实现不定宽高的图片img居中裁剪_类似微信朋友圈图片效果...相关推荐

最新文章

热门文章

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

canva画图图片居中裁剪_css实现不定宽高的图片img居中裁剪_类似微信朋友圈图片效果...相关推荐