html - 如何使这行图像在 CSS 中响应？

Question

在this website的底部我有一排标志。它在桌面浏览器上看起来非常好……只要您不调整浏览器窗口的大小。在移动设备上查看时完全没有响应。

这是 Logo 行的 HTML 代码:

<!-- 1st row of logos -->
        <div id="clientlogosrow">
        <img src="images/logo-answerables.png" class="imagessmaller" /></a>
        <img src="images/logo-mfs.png" class="images" /></a>
        <img src="images/logo-wolf.png" class="images" />
        <img src="images/logo-JA.png" class="imagessmallerv2" />
        <img src="images/logo-JOC.png" class="imagessmallerv2" />
    </div>

<!-- 2nd row of logos -->
        <div id="clientlogosrow">
        <img src="images/logo-icl.png" class="imagessmaller" />
        <img src="images/logo-pm.png" class="imagessmaller" />
        <img src="images/logo-TD.png" class="imagessmaller" />
        <img src="images/logo-kl.png" class="imagessmaller" />
        <img src="images/logo-mmt.png" class="imagessmaller" /> 
        </div>

这是 CSS:

/* Client Logos */
.images {
display: inline;
margin: 5px;
padding: 0px;
vertical-align:middle;
height:85px;
}

.imagessmaller {
display: inline;
margin: 10px;
padding: 0px;
vertical-align:middle;
height:55px;
}

.imagessmallerv2 {
display: inline;
margin: 10px;
padding: 0px;
vertical-align:middle;
height:35px;
}

#clientlogosrow {
display: block;
margin: 0px;
padding: 0px;
position: relative;
top: 7px;
height: auto;
overflow-y: hidden;
overflow-x:auto;
word-wrap:normal;
white-space:nowrap;
}

您会注意到一些不同类别的图像(“images”、“imagesmsallerv2”)，我这样做是因为我在 CSS 中的自动调整大小尝试导致 Logo 大小不成比例。我猜这不是错误的方法，所以如果有更简单的方法来布置响应式 Logo 行，请告诉我!

Answer 1

使用 flexbox 布局可以更轻松地实现您的目标。看看这个例子，我已经盗链了你的标识。以完整尺寸打开并尝试调整浏览器 View 的大小。希望这是你想要的。标识大小也可以针对较小的屏幕进行调整，现在我已经保留了您网站上的所有大小。

body {
  background-color: darkgrey; /* Just to be able to see white logotypes */
}

.logotypes {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.logotypes img {
  margin-right: 10px;
  margin-bottom: 10px;
  width: auto;
  max-width: 230px;
  max-height: 85px;
}

<div id="clientlogosrow" class="logotypes">
    <img src="https://twotailsmedia.com/images/logo-answerables.png" class="imagessmaller">
    <img src="https://twotailsmedia.com/images/logo-mfs.png" class="images">
    <img src="https://twotailsmedia.com/images/logo-wolf.png" class="images">
    <img src="https://twotailsmedia.com/images/logo-JA.png" class="imagessmallerv2">
    <img src="https://twotailsmedia.com/images/logo-JOC.png" class="imagessmallerv2">

    <img src="https://twotailsmedia.com/images/logo-icl.png" class="imagessmaller">
    <img src="https://twotailsmedia.com/images/logo-pm.png" class="imagessmaller">
    <img src="https://twotailsmedia.com/images/logo-TD.png" class="imagessmaller">
    <img src="https://twotailsmedia.com/images/logo-kl.png" class="imagessmaller">
    <img src="https://twotailsmedia.com/images/logo-mmt.png" class="imagessmaller">
</div>