javascript - 根据计数和固定包装器调整元素的大小和计算大小

Question

假设您有一个大小为 100px X 100px 的块 (div)。

现在我将一个大小为 100 X 100 像素的图像传递到这个块中。大小一样，所以很合身。

现在的问题是：如果我有 2、3 或 6 张图像并且我希望它们出现在 100 X 100 像素的框中，那么最好的方法是什么。

示例：1 张图片 -> 100 * 100，2 张图片，每张 50 * 50，9 张图片，每张 33% * 33%。

图像将始终具有相同的宽度和高度。

感谢任何提示！

Answer 1

你回答了你自己的问题:-)

imageWidth = containerWidth/amountImages

对于您的“平铺”解决方案，您可以

imageWidth = containerWidth/amountImagesInRow

imageHeight = containerHeight/amountImagesInColumn

如果您想确定需要多少行/列：定义最小宽度并执行某种操作

for(...){

if imageWidth < minWidth

amountImages -= 1;

imageWidth = containerWidth/amountImages

}

imagesInRow = amountImages;