0

I’m trying to tile random square images with a fixed width and height on a rectangular canvas.

The number of images that need to be tiled is a variable. All of the images need to show on the canvas. Image sizes need to be scaled down or up depending on the number of images that need to be fitted.

What formula would I use to scale multiple images to fit in canvas, while preserving aspect ratio for each image?

I tried different scaling formulas around StackOverflow but they focus on scaling a single image. I have X number of images that need to be scaled and fitted into the canvas.

I need the canvas to look like this :

outcome

Here is a jsfiddle of what I got. http://jsfiddle.net/7eh4adjn/1/

Milos Bejda
  • 1
  • It's not clear what you would like the result to be. Can you distort the images, or do you keep the aspect ratio constant for the images? Do you crop images at the end of row/column? – Andrei May 19 '19 at 17:07
  • Not very clear. You have a square canvas of size $M\times N$, and images all of size $m\times n$? If it's that, then you can fit $floor(M/m)$ images at most horizontally, and $floor(N/n)$ vertically. – Jean-Claude Arbaut May 19 '19 at 17:07
  • @Andrei I updated the question. The images shouldn't be distorted but the aspect ratio preserved. No images are cropped. (please view the js fiddle) – Milos Bejda May 19 '19 at 17:58
  • Then just look for a scale factor $\alpha$ such that $floor(M/(\alpha m))\cdot floor(N/(\alpha n))$ is at least the number of images. Can be found quickly by bisection. – Jean-Claude Arbaut May 19 '19 at 18:13

0 Answers0