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