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
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