How to resize images proportionally / keeping the aspect ratio?

Question

I have images that will be quite big in dimension and I want to shrink them down with jQuery while keeping the proportions constrained, i.e. the same aspect ratio.

C

Answer 1

There are 4 parameters to this problem

1. current image width iX
2. current image height iY
3. target viewport width cX
4. target viewport height cY

And there are 3 different conditional parameters

1. cX > cY ?
2. iX > cX ?
3. iY > cY ?

solution

1. Find the smaller side of the target view port F
2. Find the larger side of the current view port L
3. Find the factor of both F/L = factor
4. Multiply both sides of the current port with the factor ie, fX = iX * factor; fY = iY * factor

that's all you need to do.

//Pseudo code


iX;//current width of image in the client
iY;//current height of image in the client
cX;//configured width
cY;//configured height
fX;//final width
fY;//final height

1. check if iX,iY,cX,cY values are >0 and all values are not empty or not junk

2. lE = iX > iY ? iX: iY; //long edge

3. if ( cX < cY )
   then
4.      factor = cX/lE;     
   else
5.      factor = cY/lE;

6. fX = iX * factor ; fY = iY * factor ; 

This is a mature forum, I am not giving you code for that :)