How does facebook display your profile picture proportionally? Do they uses some algorithm? I notices the profile picture div max width is 180 px, and the height is proportional to the original height.
If you only indicate one size in an img tag, it'll scale the other (height/width) to match.
For example:
<img src='test.jpg' width'150'>
This would make the height automatically 200 if the source image is 3:4 at 300x400
This is simple. In the server-side, you get the original aspect ratio, then you calculate the height based on this value.
For an example, you have a photo of a 3/4 (1,333) ratio. If you have a max-width of 180px, you should simply divide this value by the aspect ratio. The final height should be something around 135px.
180px ----- 4px
Hpx ----- 3px
180 * 3 = 4H
4H = 540
H = 540/4 = 135px
That's it :D
well I made something in php to scale proportional, it uses a given width, height, and optionally the max width/height u want (depends on the given width and height)
function scaleProportional($img_w,$img_h,$max=50)
{
$w = 0;
$h = 0;
$img_w > $img_h ? $w = $img_w / $img_h : $w = 1;
$img_h > $img_w ? $h = $img_h / $img_w : $h = 1;
$ws = $w > $h ? $ws = ($w / $w) * $max : $ws = (1 / $h) * $max;
$hs = $h > $w ? $hs = ($h / $h) * $max : $hs = (1 / $w) * $max;
return array(
'width'=>$ws,
'height'=>$hs
);
}
Usage:
$getScale = scaleProportional(600,200,500);
$targ_w = $getScale['width']; //will return 500
$targ_h = $getScale['height']; //will return 166.666666667