调整一组 IMG 以适合容器 DIV

Question

我有一组 N 个图像（方形，但希望这并不重要），我想将它们放入容器 DIV 中，并且我想调整 IMG 的大小，以便它们占用 DIV 内的最大空间。

我找到了很多关于单个图像甚至单行图像的示例，但没有找到关于二维网格的示例。

我目前的方法是自己在 JS 中计算图像大小，然后直接使用它，但考虑到所有边距、填充等事实证明很困难。

我应该使用什么 CSS 功能？

示例代码（带有硬编码的 IMG 宽度/高度）- 这里看起来最适合的是 4x2，但每个 IMG 需要更大，以便利用完整的宽度/高度：

      img {
        border: 1px orange dotted;
        width: 128px;
        height: 128px;
        padding: 0;
        margin: 0;
      }

      #container {
        position: absolute;
        left: 64px;
        top: 32px;
        width: 600px;
        height: 400px;
        background-color: #99f;
        overflow: hidden;
        font-size: 0;
      }

  <div id="container">
    <img src="https://vectorflags.s3-us-west-2.amazonaws.com/flags/hk-square-01.png">
    <img src="https://vectorflags.s3-us-west-2.amazonaws.com/flags/cr-square-01.png">
    <img src="https://vectorflags.s3-us-west-2.amazonaws.com/flags/uk-square-01.png">
    <img src="https://vectorflags.s3-us-west-2.amazonaws.com/flags/fr-square-01.png">
    <img src="https://vectorflags.s3-us-west-2.amazonaws.com/flags/cz-square-01.png">
    <img src="https://vectorflags.s3-us-west-2.amazonaws.com/flags/se-square-01.png">
    <img src="https://vectorflags.s3-us-west-2.amazonaws.com/flags/au-square-01.png">
  </div>

Answer 1

您可以使用网格并利用

grid-template-columns

属性与

auto-fill

一起自动计算图像的宽度。 这里是对这个概念的引用。

另请参阅此 StackBlitz 了解实现。