css实现宽高不同的logo水平排列

作者: _conquer_ | 来源:发表于2017-10-25 18:05 被阅读0次

原理

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部分

<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;
            }