How to auto-resize an image while maintaining aspect ratio?

Question

Aryan Kumar · Answer

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);

forum

How to auto-resize an image while maintaining aspect ratio?

Can you answer this question?

1 Answers