图片横向排列并且保持截取图片中间不变形的CSS方法

欧阳锋

调用图片的时候一般图片大小不一致造成图片横排变形，比如：

完全变形了，那么进行代码样式优化后的效果为（取图片中间，你也可以改动代码从图片顶部截取）：

整理代码如下：

1. HTML部分
   
2. <li> <a href="1.jpg" title="测试" alt="测试"><dt><img src="1.jpg" title="测试" alt="测试"></dt></a> </li>
   
3. <li> <a href="1.jpg" title="测试" alt="测试"><dt><img src="1.jpg" title="测试" alt="测试"></dt></a> </li>
   
4. <li> <a href="1.jpg" title="测试" alt="测试"><dt><img src="1.jpg" title="测试" alt="测试"></dt></a> </li>
   
5. <li> <a href="1.jpg" title="测试" alt="测试"><dt><img src="1.jpg" title="测试" alt="测试"></dt></a> </li>

复制代码

1. CSS部分
   
2. li {
   
3.     list-style:none; width:300px;
   
4.     float:left;
   
5.     margin:10px
   
6.     }
   
7. li dt {
   
8.     overflow: hidden;
   
9.     text-align: center;
   
10.     padding-bottom: 100%!important;
    
11.     position: relative;
    
12. }
    
13. li dt img {
    
14.     width: 100%;
    
15.     max-height: 200px;
    
16.     transition: all 1.2s;
    
17.     -moz-transition: all 1.2s;
    
18.     -webkit-transition: all 1.2s;
    
19.     -o-transition: all 1.2s;
    
20.     object-fit: cover;
    
21.     position: absolute;
    
22.     top: 0;
    
23.     left: 0;
    
24.     display: block;
    
25.     height: 100%;
    
26.     width: auto;
    
27.     min-height: 100%;
    
28.     min-width: 100%;
    
29.     max-width: 300%;
    
30. }

复制代码