动态图像大小以填充固定大小的div-Javascript/CSS

我是一名经验丰富的javascript/css开发人员，只需要您以正确的方式提供一些计算输入即可完成我的要求。

我正在使用CSS和JavaScript，我想用多个圆形图像填充一个div

我的要求是，如果我有一个高度为400px的div，宽度为200px的div，并且假设我有16个圆形图像（没有固定数量的图像，只是div的高度和宽度是固定的），那么我想填充div中的所有图像，使其看起来像填充的固定大小div

我需要一个流来创建图像大小动态根据高度和宽度的div，确保我不希望任何插件这样做

计算应类似于（例如），

400px*200px和16个图像（假设）

然后图像大小将为50x50

第一行设置8幅图像，第二行设置8幅图像，上下两行设置填充顶部和底部25px将调整所有16幅图像并填充400x200大小的框

---

请引导我走正确的路

您可以使用以下逻辑：

var wd = parent.clientWidth, he=parent.clientHeight,totalImages=16,url='';
var size = Math.sqrt(wd*he/totalImages);
var di = "<div style='width:"+size +"px; height:"+size +"px; display:flex; align-items:center; justify-content:center;'><img src='"+url+"'></div>"
parent.append(di);

var wd=parent.clientWidth，he=parent.clientHeight，totalImages=16，url=''；
var size=Math.sqrt（wd*he/totalImages）；
var di=“”
父项追加（di）；

在背景中使用图像并重复。不，APISTAIL中有多个动态图像。您可以在背景中使用多个图像。但是背景图像的大小是多少？因为图像是圆形的，是否要在图像本身和div边界之间留有间隙，或者图像应该以某种方式重叠，以便没有间隙？否@UllasHunka，当我们要为

400x200/16

创建大小时，它返回

5000

的图像

size

My bad，更新后的逻辑请使用实现进行验证。