先看下这个图片：一个竖向的长方形图片，需求就是：通过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%;
}
转载请注明： 帝国模板 » 竖向长方形图片横向正方形列表布列并取图片中心不变形的CSS方法
*
回帖描述：*
链接类型：*
下载链接：
验证通过自动获取下载链接
*
描述：*
回帖描述：*
链接类型：*
阅读权限：*
下载链接：
微信客服
QQ客服
QQ群
![[php框架] Smarty基础商品教程 Smarty入门教程 Smarty框架教程 共10课](https://jy.tp.yuanmeng.life/uploads/images/20210319/f47dc487eb949895833cd962fddc6a8b.jpg)
