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

【问题标题】：Dynamic image size to fill fixed size div - Javascript/CSS动态图像大小以填充固定大小的 div - Javascript/CSS
【发布时间】：2018-12-26 05:34:35
【问题描述】：

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

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

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

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

计算应该类似于（例如）

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

那么图像大小将是 50x50

并设置第一行8张图片，第二行8张图片，设置上一行和下一行的上下内边距25px将调整所有16张图片并填充400x200大小的框。

请指导我正确的方式

【问题讨论】：

在背景中使用图像并重复。
没有来自API的多个动态图像
您仍然可以在背景中使用多个图像。
但是该背景图片的尺寸是多少？
由于图像是圆形的，您想在图像本身和 div 边界之间留出空隙，还是图像应该以某种方式重叠，这样就没有空隙了？

标签： javascript jquery html css

【解决方案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);

【讨论】：

没有@UllasHunka，当我们要为400x200/16 创建大小时，它会返回5000 的图像size
我的错，更新了逻辑，请验证实现。