多个不同的图像没有响应css

Question

我在网站上有一个部分，其中包含很多品牌的徽标（图片） 所以在桌面版本中我有8列和3行......它看起来很好， 但在移动版本中看起来很糟糕。

这是网站的图片

这是移动版的图片

这是css代码

aside.clients {
    text-align: center;
    background-color: #ffffff;
    margin-bottom: 20px;
}
aside.clients img {
    position: relative;
    margin-top: 15px;
    margin-bottom: 10px;
    overflow: hidden;
    width: 100%;
    height:auto;
}

Answer 1

您必须在此处进行一些调整以满足您的需求。我已经对你的html看起来做了一些假设：

// html
<aside class="clients">
    <div>
        <img src="..." alt="">
    </div>
    <!-- .... repeat x23 ... -->
</aside>

// css
aside.clients div {width:50%;float:left;} /* show 2 images per row for mobile */
aside.clients div img { max-width: 100%; height: auto; }
@media (min-width:768px){ /* show 4  images per row for tablet */
    aside.clients div {width:25%} 
}
@media (min-width:992px){ /* show 8  images per row for desktop */
    aside.clients div {width:12.5%} 
}

注意：它还要求您的图像都是相同的尺寸，否则新行将无法正确地换行到下一行。否则不是这种情况，请使用css清除所需的div。例如：nth-​​child（2n + 1）{clear：left;}

https://jsfiddle.net/ojk02cya/