Jump to content

A logic to calculate the image size


watsmyname
Go to solution Solved by requinix,

Recommended Posts

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

Link to comment
Share on other sites

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;
	}
}
Link to comment
Share on other sites

  • Solution

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 by requinix
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.