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

Question

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

现在我将一个大小为100 X 100px的图像传入此块。大小相同，所以很适合。

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

示例：1图像 - ＆gt; 100 * 100,2图像每张50 * 50,9张图片各33％* 33％。

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

感谢任何tipps！

Answer 1

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

imageWidth = containerWidth/amountImages

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

imageWidth = containerWidth/amountImagesInRow

imageHeight = containerHeight/amountImagesInColumn

如果要确定所需的行/列数： 定义最小宽度和某种

for(...){

if imageWidth < minWidth

amountImages -= 1;

imageWidth = containerWidth/amountImages

}

imagesInRow = amountImages;