Equation needed for image alignment

[RobRSD]

I'm working on a small(ish) javascript plugin to restructure and align images. I'm having trouble with the calculation needed to precisely align my images.

For example I have 4 images:

And I want to achieve:

• The images are within a container, in this example I have used 500 pixels but the width of the container will differ every time
• After images have been aligned they must fill the width of the container with a 20 pixel margin between them

This is as close I have come to solving the problem so far:
• Step 1: set the width of images 3 and 4 to the same width as image 2 and stack images 2,3 and 4

Step 2: enlarge image 1 to match height of stack

Step 3: Reduce everything down to container width - margin (480 pixels)

Step 4: enlarge the height of image 1 by the margins that will be added between images 2 and 3 (40 pixels)

Step 5: resize everything down to the width of the container minus the margin (480 pixels)

Step 6: Add the margins

If your still reading this, thank you!
You will see on the last diagram the second column of images does not align with the large image. I know this is because the margins for images 2 and 3 were scaled down in step 5 but cannot fathom the calculation needed to; perfectly fit the container width and perfectly align all images with a 20 pixel margin.

I hope someone can help

 

[mmm4444bot]

… the calculation needed to perfectly fit the container width and perfectly align all images with a 20 pixel margin.

I understand what you're trying to do, but a "perfect" alignment might not exist. That is, you might need to fudge here and there.

Thinking only about the example you provided, assuming that the original images all have the same dimensions (I used 89 by 133 pixels), and further assuming that any enlargements or reductions remain proportional to the original dimensions, I wrote a system of equations that yielded the following dimensions for the final images.

^{BASE × HEIGHT}

img 1

323.47 × 483.39

img 2

156.53 × 104.74

img 3

156.53 × 233.91

img4

156.53 × 104.74


You need to decide how to handle the fractional amounts. Perhaps, one or more margins will be increased or decreased by a pixel+. Maybe you'll crop off a pixel from one dimension of some image(s).


Is writing a general system of equations a good way to solve this problem, to handle differing containers? I don't have enough information to answer this.

Are the original images always the same size? Is the arrangement always the same (i.e., two portrait mode, two landscape mode)? What's the range of the container width? Are there any constraints on the container height?

Another approach would be to set up some sort of iteration, where the error between where you're at and what you want is decreased with each iteration. Just a thought …

 

[RobRSD]

Thank for your answers.
Denis, I have used pixels as I'm working on screen values but they could be replaced with mm cm inches, whatever you want as long as they used throughout, sorry if my question is hard to follow, I used diagrams in an attempt to simplify but it's a tricky question.

mmm444bot, the arrangement, size and order of images are completely random so the calculations would need to also apply to any order of images eg: 1 landscape image followed by 3 portrait, the images ratios are also not always the same. Yes image enlargements and reductions must remain proportionate.

Adjusting the margins by a small amount to align the resized images is exactly what I have coded so far and works perfectly with any combination of images, however it fails when I add borders to the images. I did not include the border problem as this is more web development specific but the borders are fixed width, a 5pixel border on an image 300 pixels wide will be 5 pixles when the image is reduced to 200 pixels wide the border still measures 5 therefore changing the image ratio when resized. My attempt to solve this was to: remove the border widths from the image dimensions, add the border value to the margin value, once all calculations have completed reapply the border values to the images and deduct from the margins, this however makes the margins very big and the final margin adjustments become considerable (5+ pixels) hence the reason for my original question.

The problem seems to be a bit of a chicken and egg issue. Step 4 in my original question would ideally add an adjusted margin value to image 1 to allow for final reduction, however I cannot know what the adjustment needs to be until after the enlargement has been made which leads you along a recursive and infinite loop to recalculate and get gradually closer.

Is this impossible, seems a shame that Einstein described the universe with 1 small equation but I'm unable to align 4 images with a long one?

 

[RobRSD]

The only givens are; there are 4 images, the margins are 20. The order of the images/ratios and container width are not fixed. Hopefully that is what you mean by a given.

 

[RobRSD]

Pictures is fine, I'm fond of them too.
In your scenario the only fixed values would be container width (height would be governed by the enclosed pictures) and margin, everything else is a variable.

 

[mmm4444bot]

… I simply can't see why the container height is not required

I think the container height defaults to the height of the tallest image.

The main issue for me is the complete randomness of both the layout and the dimensions of the original images.

I'm thinking that a different system for each layout case may need to be created. Otherwise, it seems that we have a system of equations involving 16 variables (8 representing the dimensions of four original images; 8 representing the dimensions of four final images).

Without knowing any relationships between sides with random dimensions, the number and placement of margins, and the image orientations, I don't think that I could come up with a sufficient number of equations to solve the system.

Then, there's the matter of image borders …

 

[RobRSD]

mmm444 is right, the tallest picture sets the hight of the container, if the container height was fixed it would be impossible for the pictures to fill the width of the container unless the container height was greater than the tallest picture.
So the conclusion appears that perfect alignment to an exact width is not possible. A pity but I have managed to code a working plugin, it perfectly aligns my picture but I had to accept adjusted margins and the total width of the pictures falls short of the wrapper by the same margin adjustment.
Thanks for your help with this, if you ever stumble across a similar problem with a working solution please post it here.

 

[mmm4444bot]

So the conclusion appears that perfect alignment to an exact width is not possible.

I think it's improbable that a single algorithm could be found that works for every possible layout and set of original image dimensions. However, if you were to consider individual cases, perhaps separate algorithms could be devised. As it stands, there seems to be too many variables and not enough information known in advance about their relationship. I was able to solve the case involving your posted example, only after making the stated assumptions.

Still wondering about an iterative process (i.e., overshooting, then undershooting, repeating until some tolerance is reached).

Best of luck with your project.