调整一组 IMG 的大小以适合容器 DIV

Question

我有一组 N 个图像（方形，但希望这并不重要），我想将它们放入容器 div 中，并且我想调整图像元素的大小，以便它们占用 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

一起自动计算图像的宽度。这是这个概念的参考。

main {
  padding: 1rem;
}

img {
  border: 1px orange dotted;
  width: 100%;
  height: 100%;
}

#container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  width: 100%;
  background-color: #99f;
  overflow: hidden;
}

<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>