先看下这个图片:一个竖向的长方形图片,需求就是:展示的时候要实现横向正方形排列。
一般排列后效果为:
完全变形了,那么进行代码样式优化后的效果为(取图片中间):
整理代码如下:
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%;
}
未经允许不得转载:Just My Socks中文教程网 » 竖向长方形图片展示的时候要实现横向正方形排列,如何不变形?