Fill the screen with cells without cycles while maintaining the shape of a rectangle?

Question

JavaScript

The task was to fill the screen with cells, and at the same time, the resulting rectangle should completely fit into it, retaining its shape, as here:


And at the same time avoid situations when there are fewer cells in the last row: I


wrote code for this case , but sometimes the cells are still are transferred (I think because when resizing the screen width may not be divisible by 10, and looking for a suitable cell size, we reduce it by 0.01). Is it possible to do the math in such a way that the above conditions are met, and at the same time the code does not use loops to select the appropriate cell size, and is it possible to find it at any screen resolution? Am I approaching the problem in the right way?

Answer 1

Factoring the number of cells into factors of 1000 = 2 * 2 * 2 * 5 * 5 * 5
1000 cells can be represented as a limited number of rectangles:

2 * 500
4 * 250
5 * 200
8 * 125
10 * 100
20 * 50
25 * 40

and mirrored.
When resizing, choose the one closest to the screen aspect ratio. And adjust the size of the cells themselves, if possible.
Something like this :
You just have to modify it so that it works with screen proportions when the height is greater than the width.