# Calculate Width and Height Ratio of an Image (with formula and examples)

## Calculate Image width ratio

``Formula - width_ratio = (new_height/original_height)*original_width``

Example-

``````<!DOCTYPE html>
<html lang="en-US">
<title>Width ratio</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<body class="p-5">

<div class="custom-file w-25 my-2">
</div>
<input type="number" class="form-control new-width w-25 mb-2" placeholder="Width" disabled="disabled">
<input type="number" class="form-control new-height w-25" placeholder="Height">

<script>

{
var url = URL.createObjectURL(this.files[0]);
var img = new Image();
img.src = url;
var width;
var height;
{
width = this.width;
height = this.height;
\$(".new-width").val(width);
\$(".new-height").val(height);
}
img.remove();

\$(".new-height").on("input",function(){
var new_height = \$(".new-height").val();
var width_ratio = Math.floor((new_height/height)*width);
\$(".new-width").val(width_ratio);
});
}

</script>
</body>
</html>``````

## Calculate Image height ratio-

``Formula - height_ratio = (new_width/original_width)*original_height``

Example-

``````<!DOCTYPE html>
<html lang="en-US">
<title>Height ratio</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<body class="p-5">

<div class="custom-file w-25 my-2">
</div>
<input type="number" class="form-control new-width w-25 mb-2" placeholder="Width">
<input type="number" class="form-control new-height w-25" placeholder="Height" disabled="disabled">

<script>

{
var url = URL.createObjectURL(this.files[0]);
var img = new Image();
img.src = url;
var width;
var height;
{
width = this.width;
height = this.height;
\$(".new-width").val(width);
\$(".new-height").val(height);
}
img.remove();

\$(".new-width").on("input",function(){
var new_width = \$(".new-width").val();
var height_ratio = Math.floor((new_width/width)*height);
\$(".new-height").val(height_ratio);
});
}

</script>
</body>
</html>``````