css调logo大小,css实现宽高不同的logo水平排列

原理

1.给logo外面套一个盒子(比如li)，设置li的宽度为width: 9%，高度为height:0;最重要的是设置li的padding-bottom:9%;position:relative;

2.里面的logo设置width: 100%;height: 100%;position:absolute;left:0;top:0;

代码

html部分

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;

}

最终效果图

20171025180450.png