竖向长方形图片展示的时候要实现横向正方形排列，如何不变形？

821 人阅读 | 时间：2020年05月24日 21:17

阿里云服务器	腾讯云服务器	VPS2EZ：老牌低调VPS	ZJI：香港日本美国独服
LOCVPS服务周到	HostKvm低调KVM VPS	傲游主机：优质VPS	80VPS：老牌VPS主机
搬瓦工：CN2 GIA线路	CloudCone：性价比高	JustMySocks科学上网	RackNerd：超级便宜
JustMySocks科学上网	好用的宝塔面板	购买搬瓦工VPS	恒创：香港CN2服务器

先看下这个图片：一个竖向的长方形图片，需求就是：展示的时候要实现横向正方形排列。

一般排列后效果为：

完全变形了，那么进行代码样式优化后的效果为（取图片中间）：

整理代码如下：

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%;
}