Aargh! Da’s nu al een eeuwigheid dat ik het met de hand in Photoshop doe, en het is mij verleed. Snel! Een formule uitdokteren voor de volgende situatie:

Gegeven een totale breedte w en twee beelden van verhouding r en s, wat is de hoogte h? Ik voel me weer twaalf jaar. 🙂

w = a + b
r = a/h
s = b/h

dus

r + s = a/h + b/h
h (r + s) = a + b
h (r + s) = w
h = w / (r + s)

Met andere woorden: als ik weet dat de totale breedte 480 pixels is, en ik heb één beeld van 4 op 3 en één van 3 op 4, dan is mijn hoogte:

h = 480 / ( 4/3 + 3/4)
h = 230

Eén kleine complicatie: elk beeld heeft randen, waardoor er links en rechts een paar pixels bijkomen, pakweg 5 pixels aan alle kanten, met andere woorden:

w = a + b + 20

…dat geeft dus

h = (w – 20) / (r + s)

of voor hetzelfde voorbeeld als daarnet:

h = (480 – 20) / (1.333 + .75)
h = 220

Simpel, en gemakkelijk. Kijk, een excel-bestandje voor wie geen zin heeft om het met de hand te doen: berekening.xls.

En, ha, zelfs in quick & dirty javascript:

totale breedte: border rond beelden:

beeld een: x

beeld twee: x

doelhoogte:

De afmetingen van beeld één en beeld twee mogen zowel in pixels als in verhoudingen zijn (dus zowel 1024×768 als 4×3 geven hetzelfde resultaat).