先看下这个图片：一个竖向的长圆形图片，需求就是：通过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)
