How to Resize Images Proportionally while Keeping the Aspect Ratio in JavaScript

08/01/2021

Contents

In this article, you will learn how to resize images proportionally while keeping the aspect ratio in JavaScript.

Resizing images proportionally while keeping the aspect ratio in JavaScript

Resizing images is a common task in web development. In some cases, it’s necessary to resize images proportionally while keeping the aspect ratio intact.

Get the image element

The first step is to get the image element in JavaScript. You can do this using the document.getElementById method. Here’s an example:

const image = document.getElementById('my-image');

Get the image dimensions

Once you have the image element, you need to get its original dimensions. You can do this by accessing the naturalWidth and naturalHeight properties. Here’s an example:

const width = image.naturalWidth;
const height = image.naturalHeight;

Calculate the new dimensions

To resize the image proportionally, you need to calculate the new dimensions based on a maximum width or height. Let’s say you want to resize the image so that the maximum width is 500 pixels. Here’s how you can calculate the new dimensions:

const maxWidth = 500;
const maxHeight = 500;
let newWidth = width;
let newHeight = height;

if (width > maxWidth) {
  newWidth = maxWidth;
  newHeight = (newWidth / width) * height;
}

if (newHeight > maxHeight) {
  newHeight = maxHeight;
  newWidth = (newHeight / height) * width;
}

The code above first sets the maximum width and height to 500 pixels. It then calculates the new width and height based on the original dimensions. If the original width is greater than the maximum width, it sets the new width to the maximum width and calculates the new height proportionally. If the new height is greater than the maximum height, it sets the new height to the maximum height and calculates the new width proportionally.

Set the new dimensions

Finally, you need to set the new dimensions on the image element. You can do this using the style.width and style.height properties. Here’s an example:

image.style.width = `${newWidth}px`;
image.style.height = `${newHeight}px`;

This code sets the new width and height on the image element. The ${newWidth}px and ${newHeight}px values are template literals that add the px suffix to the width and height values.

Full code is below:

const image = document.getElementById('my-image');
const width = image.naturalWidth;
const height = image.naturalHeight;
const maxWidth = 500;
const maxHeight = 500;
let newWidth = width;
let newHeight = height;

if (width > maxWidth) {
  newWidth = maxWidth;
  newHeight = (newWidth / width) * height;
}

if (newHeight > maxHeight) {
  newHeight = maxHeight;
  newWidth = (newHeight / height) * width;
}

image.style.width = `${newWidth}px`;
image.style.height = `${newHeight}px`;

This code will resize the image element proportionally while keeping the aspect ratio intact. You can change the maxWidth and maxHeight values to resize the image to a different size.