HTML/CSS
竖向长方形图片横向排列并取图片中间不挤压变形的CSS方法
PetitQ
先看下这个图片：一个竖向的长方形图片，需求就是：通过 CSS 的方法使展示的时候竖向图片要实现横向正方形排列而且图片不能变形。一般排列后效果为：
完全变形了，那么进行代码样式优化后的效果为（取图片中间）：
HTML 部分：
<li> <a href="1.jpg" title="测试" alt="测试"><dt><img src="1.jpg" title="测试" alt="测试"></dt></a> </li>
<li> <a href="1.jpg" title="测试" alt="测试"><dt><img src="1.jpg" title="测试" alt="测试"></dt></a> </li>
<li> <a href="1.jpg" title="测试" alt="测试"><dt><img src="1.jpg" title="测试" alt="测试"></dt></a> </li>
<li> <a href="1.jpg" title="测试" alt="测试"><dt><img src="1.jpg" title="测试" alt="测试"></dt></a> </li>
也想出现在这里？联系我们吧
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%;
}
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
