A logic to calculate the image size

[watsmyname]

Hello,

 

Let me explain with an example.

Lets say I have an Image of size

960px X 668px

 

I have a div which holds this image. The div size is
154px X 75px

 

This div can have any variable size.

 

If we see that the aspect ratio of image and the aspect ratio of the div that holds image are different.

 

All i need to do is Resize and Crop the Image in such a way that it takes maximum possible height and width  of the original size and also maintain the aspect ratio of the div that holds this image. I just need a logic to calculate a percentage that by how much DIV width and height should be multiplied so that the resulting size is closer to the image size but doesnot exceed the image size and also the aspect Ratio will be same as that of DIV but not of image..

The motive to do this is that image exactly fits the div when scaled to div's size without stretching or disorting the image.

 

Thanks

watsmyname

[lemmin]

How about this:

$ratio = $img_width/$img_height;

if ($img_height < $con_height)
{
	$new_width = $con_width;
	$new_height = $con_width/$ratio;
}
elseif ($img_width < $img_height)
{
	$new_height = $con_height;
	$new_width = $con_height*$ratio;
}
else
{
	$new_width = $con_width;
	$new_height = $new_width/$ratio;
	
	if ($new_height > $con_height)
	{
		$new_height = $con_height;
		$new_width = $new_height*$ratio;
	}
}

[requinix]

So the explanation of what happens (SEO goodness!):

 

Say you had an image 9999x1000 and want to scale it to fit in 154x75. Maintaining the aspect ratio means you resize the width and height by the same percentage, but the question is which side do you use to calculate that? If you resize 9999->154 that's 1.54% of the original width while 1000->75 is 7.5% of the original height.

 

So say you resize according to the width. New width is 154 and the new height is 1.54% * 1000 = 15px. That's good because you want the image to fit inside the new dimensions. If you resize according to the height then the new width is 7.5% * 9999 = 750px which is definitely not inside.

Given the two percentages, the smaller percent will mean the image shrinks more and so guarantee it fits inside the bounds (like if you have a box to fill), while the larger percent means the resized image fits outside the bounds (like if you want the image to be at least as large as some size).

 

With that explanation you can

width percent = new width / old width
height percent = new height / old height

if width percent < height percent {
	new width is unchanged
	new height = width percent * old height
} else the width percent >= height percent so {
	new width = height percent * old width
	new height is unchanged
}

or even easier

percent = min(new width / old width, new height / old height)
new width = percent * old width
new height = percent * old height

Edited April 17, 2013 by requinix