Assume we have a set of n rectangular images whose widths and heights
(expressed in pixels) are, respectively,
W1byH1,
W2byH2,
W3byH3,
... ,
WnbyHn.
We would like to display these images sidebyside on a fixedwidth webpage,
but in cases where their heights may differ, or where the total of their widths
does not match the width of our webpage's displayarea, then some rescaling of these
images will need to be performed, perhaps by using an imageediting tool such as
the Microsoft Paint program or the Linux Gimp utility.
A simple example of this situation occurs when we receive a pair of smallsize photographs,
sent to us via email from an iPhone, such as the two below  one having landscape
orientation, the other having portrait orientation:
The dimensions of the lefthand photo are 320by240 whereas the dimensions
of the righthand photo are 240by320 .
To determine the appropriate scaling factors s1, s2, s3, ... , sn and,
simultaneously, the uniform pixelheight u for the n rescaled images,
we can formulate a system of n+1 linear equalities in these n+1
unknowns:
H1*s1 = u
H2*s2 = u
H3*s3 = u
...
Hn*sn = u
W1*s1 + W2*s2 + W3*s3 + ... + Wn*sn = D
where the constant D denotes the horizontal displaywidth of our webpage,
expressed in pixels.
Here the first n equations express the condition that, after being rescaled,
all the rectangles will have the same height u , while the final equation
expresses the requirement that, after rescaling, the sum of these n imagewidths
will be equal to the webpage's displaywidth D .
Using these equations it is straightforward to express the n scalingfactors
s1, s2, s3, ... , sn in terms of the unknown uniform imageheight u
as follows:
s1 = u/H1,
s2 = u/H2,
s3 = u/H3,
... ,
sn = u/Hn
and then substitute these expressions in the final equation:
W1*(u/H1) + W2*(u/H2) + W3*(u/H3) + ... + Wn*(u/Hn) = D
which can immediately be solved for u :
u = D / [ (W1/H1) + (W2/H2) + (W3/H3) + ... + (Wn/Hn) ]
For the special case of the preceeding twoimage example, if we have D = 700,
then the uniform imageheight u will be u = 336
u = 700 / [ (320/240) + (240/320) ]
= 700 / [ 4/3 + 3/4 ] = 700 / [ 25/12 ] = 336
The scalingfactor s1 = 336/240 = 1.4 transforms the 320by240 landscapeformat
rectangle into a 448by336 image, while the scalingfactor s2 = 336/360 = 1.05
transforms the 240by360 portraitformat rectangle into a 252by336 image,
so that they fit neatly into our webpage display:
