Changing an image is easy, but how do you change it back to the original size after it has been changed? You may try this to change all images in a document back to the original size:

var i,L=document.images.length;
for(i=0;i<L;++i){
 document.images[i].style.height = 'auto'; //setting CSS value
 document.images[i].style.width = 'auto'; //setting CSS value
// document.images[i].height = ''; (don't need this, would be setting img.attribute)
// document.images[i].width = ''; (don't need this, would be setting img.attribute)
}

Direct manipulation

HTML tag declaration for image:

<img id="my-img" src="src/to/your/image.jpg" width="1280px" height="720px" />
<!-- OR -->
<img id="my-img" src="src/to/your/image.jpg" style="width: 1280px; height: 720px;" />

Handling html tag by direct access to object image:

const myImg = document.getElementById("my-img");

// Set a new width and height
myImg.style.width = "800px";
myImg.style.height = "450px";
// Or set a new width and height by attribute
// This option is not advisable because the attribute has a 
// low priority over the style property.
myImg.setAttribute("width", 800);
myImg.setAttribute("height", 450);

Functions for manipulation

Using the updateImageSizeWithWidth or updateImageSizeWithHeight method below, you can increase or decrease any image without having to explicitly specify the exact width and height, you only need one value out of these two to update the image size.

/**
 * Update image size using width
 *
 * param {HTMLImageElement} img
 * param {number} newWidth
 */function updateImageSizeWithWidth(img, newWidth) {
  // Getting the width and height of the current image 
  const oldWidth =  Number.parseFloat(getComputedStyle(img).width || img.getAttribute("width"));
  const oldHeight = Number.parseFloat(getComputedStyle(img).height || img.getAttribute("height"));
  // Getting proportional height with new width
  const newHeight = (newWidth * oldHeight)/oldWidth;
  // Setting dimensions in the image
  img.style.width = `${newWidth}px`;
  img.style.height = `${newHeight}px`;
}

/**
 * Update image size using height
 *
 * param {HTMLImageElement} img
 * param {number} newHeight
 */
function updateImageSizeWithHeight(img, newHeight) {
  // Getting the width and height of the current image 
  const oldWidth =  Number.parseFloat(getComputedStyle(img).width || img.getAttribute("width"));
  const oldHeight = Number.parseFloat(getComputedStyle(img).height || img.getAttribute("height"));
  // Getting proportional height with new width
  const newWidth = (newHeight * oldWidth)/oldHeight;
  // Setting dimensions in the image
  img.style.width = `${newWidth}px`;
  img.style.height = `${newHeight}px`;
}

updateImageSizeWithWidth(myImg, 800);
// Or
updateImageSizeWithHeight(myImg, 450);

You can do this:

• .html file:

<img src="src/to/your/img.jpg" id="yourImgId"/>

• .js file:

document.getElementById("yourImgId").style.height = "heightpx";

The same you can do with the width.