forum

Home / DeveloperSection / Forums / How to auto-resize an image while maintaining aspect ratio?

Ask Question
Utpal Vishwas

Utpal Vishwas

Follow
I am Utpal Vishwas from Uttar Pradesh. Have completed my B. Tech. course from MNNIT campus Prayagraj in 2022. I have good knowledge of computer networking.

Can you answer this question?

Answer

1 Answers

Aryan Kumar

Aryan Kumar

01-Aug-2023

Sure, here are a few ways to auto resize an image while maintaining aspect ratio:

Using CSS

You can use the width and height properties of the img element to auto resize an image while maintaining aspect ratio. For example, the following CSS will resize an image to be 100px wide and will maintain the aspect ratio of the image:

CSS

img {
  width: 100px;
  height: auto;
}

Using JavaScript

You can also use JavaScript to auto resize an image while maintaining aspect ratio. The following JavaScript code will resize an image to be 100px wide and will maintain the aspect ratio of the image:

JavaScript

function resizeImage(image, width) {
  var height = image.height * (width / image.width);
  image.width = width;
  image.height = height;
}

// Resize the image
resizeImage(document.getElementById("myImage"), 100);

Using the Sharp library

You can also use the Sharp library to auto resize an image while maintaining aspect ratio. The Sharp library is a popular image processing library for Node.js. The following code will resize an image to be 100px wide and will maintain the aspect ratio of the image:

JavaScript

const sharp = require("sharp");

// Resize the image
const resizedImage = await sharp(imagePath)
  .resize(100)
  .toBuffer();

// Save the resized image
const resizedImagePath = "resized-image.jpg";
await resizedImage.save(resizedImagePath);
MindStick Training

Liked By