jquery - 多个不同的图像不响应 css

Question

我在网站上有一个部分，其中包含许多品牌的 Logo (图像) 所以在桌面版中我有 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/