Изменение размеров и вычисление размеров элементов в зависимости от количества и фиксированной обертки

Question

позволяет сказать, что у вас есть блок (div) размером 100px X 100px.

Теперь я перехожу в этот блок с одним изображением размером 100 х 100 пикселей. Такой же размер, поэтому он подходит.

Теперь вопрос: какой лучший подход, если у меня есть 2, 3 или 6 изображений, и я хочу, чтобы они появлялись в коробке 100 X 100 пикселей.

Пример: 1 изображение -> 100 * 100, 2 изображения 50 * 50 каждый, 9 изображений 33% * 33% каждый.

Изображения всегда будут иметь такую ​​же ширину и высоту.

Спасибо за подсказку!

Answer 1

вы answerd свой вопрос :-)

imageWidth = containerWidth/amountImages

для вашей "плитки" Решение можно

imageWidth = containerWidth/amountImagesInRow

imageHeight = containerHeight/amountImagesInColumn

Если вы хотите, чтобы определить, сколько rows/col вам нужно: определить минимальную ширину и сделать некоторые k Ind из

for(...){

if imageWidth < minWidth

amountImages -= 1;

imageWidth = containerWidth/amountImages

}

imagesInRow = amountImages;