Demo of changing height and width of an Image and resetting to natural size

Keep pressing the buttons, then reset the image to its intrinsic dimensions.

Return to tutorial on Image naturalHeight | Image naturalWidth

JavaScript

const image = document.getElementById('i1');
const message = document.getElementById('msg');

function showSize() {
  message.textContent = `Height: ${image.height}, Width: ${image.width}`;
}

function resizeImage(action) {
  let height = image.height;
  let width = image.width;

  switch (action) {
    case 'up':
      if (height < 300) height *= 2;
      break;
    case 'down':
      if (height > 10) height = Math.max(10, Math.round(height / 2));
      break;
    case 'width-up':
      if (width < 400) width *= 2;
      break;
    case 'width-down':
      if (width > 10) width = Math.max(10, Math.round(width / 2));
      break;
  }

  image.width = width;
  image.height = height;
  showSize();
}

document.querySelectorAll('[data-resize]').forEach((button) => {
  button.addEventListener('click', () => resizeImage(button.dataset.resize));
});

document.getElementById('resetNatural').addEventListener('click', () => {
  image.width = image.naturalWidth;
  image.height = image.naturalHeight;
  showSize();
});

image.addEventListener('load', showSize);
if (image.complete) showSize();

HTML

<img src="images/help.jpg" id="i1" alt="Help illustration">
<button type="button" data-resize="up">Expand ( Height )</button>
<button type="button" data-resize="down">Compress ( Height )</button>
<button type="button" data-resize="width-up">Expand ( Width )</button>
<button type="button" data-resize="width-down">Compress ( Width )</button>
<button type="button" id="resetNatural">Reset to NaturalWidth & naturalHeight</button>
<div id="msg" aria-live="polite"></div>

Complete working page

<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Resize and reset an image</title></head><body>
<img src="images/help.jpg" id="i1" alt="Help illustration">
<button type="button" data-resize="up">Expand ( Height )</button>
<button type="button" data-resize="down">Compress ( Height )</button>
<button type="button" data-resize="width-up">Expand ( Width )</button>
<button type="button" data-resize="width-down">Compress ( Width )</button>
<button type="button" id="resetNatural">Reset to NaturalWidth & naturalHeight</button>
<div id="msg" aria-live="polite"></div>
<script>
const image = document.getElementById('i1');
const message = document.getElementById('msg');

function showSize() {
  message.textContent = `Height: ${image.height}, Width: ${image.width}`;
}

function resizeImage(action) {
  let height = image.height;
  let width = image.width;

  switch (action) {
    case 'up':
      if (height < 300) height *= 2;
      break;
    case 'down':
      if (height > 10) height = Math.max(10, Math.round(height / 2));
      break;
    case 'width-up':
      if (width < 400) width *= 2;
      break;
    case 'width-down':
      if (width > 10) width = Math.max(10, Math.round(width / 2));
      break;
  }

  image.width = width;
  image.height = height;
  showSize();
}

document.querySelectorAll('[data-resize]').forEach((button) => {
  button.addEventListener('click', () => resizeImage(button.dataset.resize));
});

document.getElementById('resetNatural').addEventListener('click', () => {
  image.width = image.naturalWidth;
  image.height = image.naturalHeight;
  showSize();
});

image.addEventListener('load', showSize);
if (image.complete) showSize();
</script></body></html>