动态图片大小可填充固定大小的div-Javascript / CSS

Question

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

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

我的要求是，如果我有一个height of 400px和width of 200px的div并假定我有16 round images（没有固定的图像数量，只有高度和宽度的div是固定的），那么我想填充div中看起来像填充固定大小的div的所有图像。

我需要一个流程来根据div的高度和宽度动态创建图像大小，请确保我不希望任何插件执行此操作。

计算结果应类似于（例如）

  

400px * 200px和16张图片（假定）

     

然后图像尺寸将为50x50

     

并在第一行中设置8张图像，在第二行中设置8张图像，并在顶部行和底部行的顶部和底部25px填充边距将调整所有16张图像，并填充400x200尺寸的框。

请以正确的方式指导我

Answer 1

您可以使用以下逻辑：

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