原理
1.給logo外面套一個(gè)盒子(比如li)幕随,設(shè)置li的寬度為width: 9%衔瓮,高度為height:0;最重要的是設(shè)置li的padding-bottom:9%;position:relative;
2.里面的logo設(shè)置width: 100%;height: 100%;position:absolute;left:0;top:0;
代碼
html部分
<div class="box">
<ul>
<li><img src=""/></li>
<li><img src=""/></li>
<li><img src=""/></li>
<li><img src=""/></li>
<li><img src=""/></li>
<li><img src=""/></li>
</ul>
</div>
css部分
.box{
padding: 0 15px;
}
ul,li{
padding: 0;
margin: 0;
list-style: none;
}
ul{
overflow: hidden;
}
li{
float: left;
width: 9%;
height:0;
margin:5px 0.5%;
padding-bottom:9%;
position:relative;
border-radius:50%;
}
img{
display: block;
border-radius: 50%;
width: 100%;
height: 100%;
position:absolute;
left:0;
top:0;
}