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