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

Question

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

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

我的要求是，如果我有一个高度为 400px 和 宽度为 200px 的 div，并假设我有 16 个圆形图像(< em>没有任何固定数量的图像只是 div 的高度和宽度是固定的)，然后我想填充 div 中的所有图像，它看起来像填充固定大小的 div。

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

计算应该是这样的(例如，)

400px * 200px and 16 images (assume)

then the image size will be 50x50

and setting 8 images in first row and 8 in second row, and the setting padding top and bottom 25px of upper row and bottom row will adjust all 16 images and fill the box of 400x200 size.

请引导我走正确的路

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