Maintain image aspect ratio while resizing using javascript

Mar 14, 2015, by php team

What is image aspect ratio?

The aspect ratio of an image describes the proportional relationship between its width and its height. It is commonly expressed as two numbers separated by a colon, as in 16:9.  For an x:y aspect ratio, no matter how big or small the image is, if the width is divided into x units of equal length and the height is measured using this same length unit, the height will be measured to be y units.

Usually we need to resize the images for different pages in our website. But in most of the time, while resizing, the image lost its quality. Because of the image has an incorrect aspect ratio and appears stretched.

Now we are going to see the simple solution for maintaining the image aspect ratio while resizing. Below is the java script function to calculate image aspect ratio.

function GetImageRatio(SourceWidth, SourceHeight, MaxWidth, MaxHeight) {

var ratio = Math.min(MaxWidth / SourceWidth, MaxHeight / SourceHeight);

return {ratio:ratio, width: SourceWidth*ratio, height: SourceHeight*ratio };

}

Function parameters:

    SourceWidth: Width of the source image.

    SourceHeight: Height of the source image.

    MaxWidth: Maximum available width.

    MaxHeight: Maximum available height.

This function provides the correct ratio, height & width for the source image to the specified maximum height & width.

Example Source code :

HTML:

<img id=”source_image” src=”pramid.jpg”  />

Java Script :

<script type=”text/javascript”>

function GetImageRatio(SourceWidth, SourceHeight, MaxWidth, MaxHeight) {

var ratio = Math.min(MaxWidth / SourceWidth, MaxHeight / SourceHeight);

return {ratio:ratio, width: SourceWidth*ratio, height: SourceHeight*ratio };

}

$(document).ready(function(){

var imgwidth    = $(‘#source_image’).width();

var imgheight    = $(‘#source_image’).height();

var maxwidth    = 500;

var maxheight    = 500;

var result        = GetImageRatio(imgwidth,imgheight,maxwidth,maxheight);

$(‘#source_image’).css(“height”,result.height);

$(‘#source_image’).css(“width”,result.width);

});

</script>