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

Resizing and Calculating sizes of Elements depending on count and fixed wrapper

本文关键字：调整元素计算包装更新时间：2023-09-26

假设你有一个大小为100px X 100px的块（div）。

现在我将一张大小为 100 X 100px 的图像传递到这个块中。相同的尺寸，所以它适合。

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

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

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

感谢您的任何提示！

你回答了你自己的问题：-）

imageWidth = containerWidth/amountImages

对于您的"磁贴"解决方案，您可以

imageWidth = containerWidth/amountImagesInRow

imageHeight = containerHeight/amountImagesInColumn

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

for(...){

if imageWidth < minWidth

amountImages -= 1;

imageWidth = containerWidth/amountImages

}

imagesInRow = amountImages;