Jump to content
  • Advertisement
Sign in to follow this  

Define maximum grid for thumbnails

This topic is 3166 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hello, my problem is: Lets say we have X pictures (18), and these pictures have width/height ratio 2/3 We also have drawig surface width and height, lets say 600x450 so ratio is 4/3 logical maximum grid will be 6x3 = 18 because we have to keep image width/height ratio, but how to calculate that??

Share this post

Link to post
Share on other sites
Lets say your image aspect ratio is ImgAR, in your example 2/3
And lets say your window aspect ratio is WndAR, in your example 4/3

The way I think about this problem is this. I'd really like to have all of the images be as tall as possible. I'd like them to fill the full window height if I can. This is like having one row of images. But I only have so much window space that will allow the images on one row. I can easily find how many images will actually fit in the window, in one row, by looking at the ratio of the ratios. Put another way, ImgAR represents the relative width of a single image, and WndAR represents the *available* relative width, so the ratio of those two ratios tells me how many images I can fit in a single row:

Number of full-window-height images that fit in the window = WndAR / ImgAR
In your case, that would be (4/3) / (2/3) = 2

That won't work, since I have 18 images. So what happens if I scale down the images by 50% so that I now have two rows. Since I've scaled the images by half, I can now double the number of images on each row, so:

Number of half-window-height images per row = 2 * WndAR / ImgAR = 4

You can generalize that formula to be:

Num_imgs_per_row = NR * WndAR / ImgAR

Here, NR = number of rows

Note that Num_imgs_per_row is actually the same as the number of columns, so

NC = num columns = NR * WndAR / ImgAR

I have related the number of columns and rows. I know that if I fill all the rows and columns, then X = NC * NR, so I can create this equation:

X = NR * NC = NR * NR * WndAR / ImgAR


X = NR2 * WndAR / ImgAR

So, you can solve that for NR:

NR = sqrt(X * ImgAR / WndAR)

The result might not be an integer, so you might have to round it, but there's a rule for this, so don't round yet.

Then, you compute the number of columns using the equation for NC above.

Plugging in your case, where X = 18, then

NR = sqrt(18 * (2/3) / (4/3)) = sqrt(9) = 3


NC = 3 * (4/3) / (2/3) = 6

As with NR, you might get a non-integer value for NC in some cases and so you'd need to round it as well.

The rule for rounding should be something like...if ImgAR is > 1, then the images are wider than they are tall...I'd rather have fewer images per row but more rows is okay So, I round NC down and NR up. NC * NR might be > X, so I'll have blank spaces, but I'll maximize the size of the thumbnails. If ImgAR is < 1, then the images are taller than they are wide. I'd rather have fewer rows, so round NC up and NR down. Again, NC * NR might be > X so there will be blank spaces but the thumbnail sizes would be maximized.

Hope that helps!

Share this post

Link to post
Share on other sites
Sign in to follow this  

  • Advertisement

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!