html - 如何使一排图像调整大小并适合移动设备上的一行？

Question

有点愚蠢的问题，但我能弄明白。我在我的投资组合网站上工作，我有我擅长的软件语言的图标(bootstrap 应该是其中之一)。

我只想让这些图像显示在一行中，并根据屏幕大小调整大小。

这是我一直在尝试的一些代码:

<div class="row">
    <div class="col-md-12 text-center" style="max-width: 100%">
        <img style="height: auto; width:64px" src="/images/html5.png"  />
        <img style="height: auto; width:64px" src="/images/divide.png"  />
        <img style="height: auto; width:64px" src="/images/bootstrap.png" />
        <img style="height: auto; width:64px" src="/images/divide.png"  />
        <img style="height: auto; width:64px" src="/images/c.png" />
        <img style="height: auto; width:64px" src="/images/divide.png"  />
        <img style="height: auto; width:64px" src="/images/Unity.png" />
    </div>
</div>

这是它在移动设备上的样子:

Answer 1

img {
  display: inline-block !important;
  max-width: 12% !important;
}

Border-box 包括宽度的填充和边框以及宽度的 14.28% * 7 张图像 = 99.96%。您还可以使用:

• 14.285% * 7 张图片 = 99.995%
• 14.2857%* 7 张图片 = 99.9999%
• 14.285714285714285714285714285714% * 7 张图片 = 99.999999999999...%