竖向长方形图片横向正方形列表排列并取图片中间不变形的CSS方法

先看下这个图片:一个竖向的长方形图片,需求就是:通过CSS的方法使展示的时候竖向图片要实现横向正方形排列而且图片不能变形。

竖向长方形图片横向正方形列表排列并取图片中间不变形的CSS方法

一般排列后效果为:

竖向长方形图片横向正方形列表排列并取图片中间不变形的CSS方法

完全变形了,那么进行代码样式优化后的效果为(取图片中间):

竖向长方形图片横向正方形列表排列并取图片中间不变形的CSS方法

墨鱼整理代码如下:

HTML部分:

  • 测试

 

  • 测试

 

  • 测试

 

  • 测试

CSS部分:

li {
list-style:none; width:300px;
float:left;
margin:10px
}
li dt {
overflow: hidden;
text-align: center;
padding-bottom: 100%!important;
position: relative;
}
li dt img {
width: 100%;
max-height: 200px;
transition: all 1.2s;
-moz-transition: all 1.2s;
-webkit-transition: all 1.2s;
-o-transition: all 1.2s;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
display: block;
height: 100%;
width: auto;
min-height: 100%;
min-width: 100%;
max-width: 300%;
}

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注