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">
<head>
	<title>Width ratio</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<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>
</head>
<body class="p-5">


	<div class="custom-file w-25 my-2">
	<input type="file" class="custom-file-input" accept="image/*" id="upload-file">
	<label for="upload" class="custom-file-label">Choose Images</label>
	</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 upload = document.querySelector("#upload-file");
upload.onchange = function()
{
		var url = URL.createObjectURL(this.files[0]);
		var img = new Image();
		img.src = url;
		var width;
		var height;
		img.onload = function()
		{
			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">
<head>
	<title>Height ratio</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<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>
</head>
<body class="p-5">


	<div class="custom-file w-25 my-2">
	<input type="file" class="custom-file-input" accept="image/*" id="upload-file">
	<label for="upload" class="custom-file-label">Choose Images</label>
	</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 upload = document.querySelector("#upload-file");
upload.onchange = function()
{
		var url = URL.createObjectURL(this.files[0]);
		var img = new Image();
		img.src = url;
		var width;
		var height;
		img.onload = function()
		{
			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>

Leave a Comment