Monday, 24 June 2013

Dynamic image resize function maintaining aspect ratio

$img-width = Image width
$img-height = Image height
$cont-width = Width of the display container
$cont-height = height of the display container



function  calculate($img-width,$img-height,$cont-width,$cont-height)
{
    $adjusted=array($img-width,$img-height);
    $ratio=$img-width/$img-height;

    if($img-width>$cont-width || $img-height>$cont-height)
    {
        $adjusted[0]=$cont-width;
        $adjusted[1]=$adjusted[0]/$ratio;
       
        if($adjusted[1] > $cont-height)
        {
            $adjusted[1]=$cont-height;
            $adjusted[0]=$adjusted[1]*$ratio;
        }
    }
    return $adjusted; // adjusted[0]=required width, adjusted[1]=required height
}



If image width and image height are both less than those of the container then we need no resizing. But resizing is required if any one or both of image width and image height exceeds those of the container.

So, adjustment begins if:

if($img-width>$cont-width || $img-height>$cont-height)

Within the if condition we don't know which one exceeds. Might be width, or might be height or both of them. Whatever may be the case, we have to reduce the image size to fit into the container, but at the same time maintaining aspect ratio. That's why we have calculated the ratio as :


$ratio=$img-width/$img-height;

During reduction, a time will come when an exceeded dimension becomes equal to that of the container. Let's assume that this is the width. So,

$adjusted[0]=$cont-width; // $adjusted[0] is the required width

Hence, at this time, maintaining aspect ratio the image width should be:

$adjusted[1]=$adjusted[0]/$ratio; // $adjusted[1] is the required height

But, at this point we are not sure whether the calculated height fits in the height of the container. So, check by: 

if($adjusted[1] > $cont-height)

If the above is true, then our adjustment was incorrect. We must adjust the height first and then the width:

$adjusted[1]=$cont-height;
$adjusted[0]=$adjusted[1]*$ratio; // to maintain the ratio

document.write() overwrites the entire page

document.write is a function which basically outputs whatever is given to it. But sometimes, improper usage may overwrite the entire page d...