我有一组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>

推荐答案

您可以使用网格并将grid-template-columns属性与auto-fill一起使用来自动计算图像的宽度.以下是对这一概念的reference分.

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>

Html相关问答推荐

如何在一个div中心字体图标?

选中/取消选中带有_hyperscript的多个复选框

需要关于HTML的建议

邮箱追踪器-有效,但在Gmail客户端中是否可以显示问号图标以外的其他内容?

如何使用HTML和css代码在vb.net上打印POS

天使17:令人惊叹的动画

覆盖垫子中的边框底部 Select

在弹性框布局中的第n个元素后强制换行

在TWebLabel标题中设置换行符/换行符的方法?

如何在CSS中延迟触发2个转换?

网格项未在同一行上对齐

使用shinyjqui拖放到网格表中

如何在 VS Code 中 Select 和删除 HTML 元素(其标签和内容)?

无法在 CSS 中将 h1 标签居中

为什么 Flexbox 中相邻元素上的 flex:1 会影响另一个元素的固定宽度?

在HTML请求中添加源URL

白色栏超出页面100%的右侧

在带有换行文本的工具提示中显示溢出文本

辅助功能:alt 或 alt="" 用于装饰图像

是否可以使用纯 css 创建具有斜角效果的锯齿形边缘?