css实现不同logo尺寸大小图片对齐布局

实现方法：

 *{
	margin: 0;
	padding: 0;
}
ul,li{
	list-style: none;
}
.brands {
	width: 800px;
	margin: 0 auto;
	
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	grid-gap: 1rem;
}

.brands__item {
	padding: 20px 0;
	
	background: #eee;
}

.brands__item a {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.brands__item img {
	width: 90px;
	height: 50px;
	object-fit: contain;
	mix-blend-mode: multiply;
}

<ul class="brands">
	    <li class="brands__item">
	        <a href="#">
	            <img src="img/logo01.png" alt="">
	        </a>
	    </li>
		<li class="brands__item">
		    <a href="#">
		        <img src="img/logo02.png" alt="">
		    </a>
		</li>
		<li class="brands__item">
		    <a href="#">
		        <img src="img/logo03.png" alt="">
		    </a>
		</li>
		<li class="brands__item">
		    <a href="#">
		        <img src="img/logo04.png" alt="">
		    </a>
		</li>
		<li class="brands__item">
		    <a href="#">
		        <img src="img/logo05.png" alt="">
		    </a>
		</li>
		<li class="brands__item">
		    <a href="#">
		        <img src="img/logo06.png" alt="">
		    </a>
		</li>
		<li>......</li>
</ul>

效果：

参考 https://juejin.im/post/6865107864139087886#heading-10

        https://ishadeed.com/article/aligning-logos-css

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/682

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！