Determine number of images to place in a fixed layer

Question

Just as the title explains.

I need to determine how many images from a collection of images I can place in a div, that is for example 100px x 100px and the width and height of each image.

I've been trying to figure the algorithm out for this but my brain is fried.

What I have so far (JavaScript) is to take the width + height (minus padding) / the number of images I have, so let's say I have 13 images to place in 100x100 I can place a maximum of 4, for example, but how do I determine the height (width will be 100px) for each image to make the proportionally fit?

Update

Okay, I have 20+ images that I want to display in a 100x100 block without cutting off images on either the left or right. So, how do I determine, via code that I can only display 4 images, each of 25px x 25px. How do I determine the appropriate width*height of 4 images to fit optimally within 100*100 .

Answer 1

The short answer is WidthOfYourDisplayArea \ NumberOfImagesYouWantToFitInThatArea. Where "\" signifies integer division but there's a little bit more to that.

At its base, that would be a tiling problem i.e. Fill a 100x100 rectangle with 20 thumbnails at various sizes (please see below). But, since you are fixing the dimensions of the thumbnails it ends up being an easier problem to deal with.

Due to the images having an aspect ratio, you will have to work with just one dimension and have the other one "work itself out".

Your thumbnails will still have to measure 25x25 anyway, but the images inside them will have to be resized for the content to appear undistorted. So what you could do would be to wrap your imgs inside divs. The divs will be 25x25 but the imgs dimensions will be different.

If the original image for which you are trying to work the thumbnail out is 1024x768 (for example) then its aspect ratio is Width / Height = 1024/768 = 1.33333 . What you would be trying to find out is the height of the image by fixing its width. Therefore you are looking at something like 25 * (Height / Width) (notice the reversal) which works out to something like 25 * (1/1.33333) = 18.75004. So, this thumbnail will look a bit like a "band" going across the 25x25 square and living a space of about 3 pixels at the top and at the bottom.

I hope this helps.