Image Swap Example

For https://forums.digitalpoint.com/threads/javascript-sizing-image-help.2782384/

HTML

<p>
  <img id='myimage' src='https://cldup.com/xMbTH2XUJz-3000x3000.png' width='425' height='132'></p>
<p>
  <span onclick='switchImage("barn"); return false;'>Use the Barn Photo</span>
</p>
<p>
  <span onclick='switchImage("food"); return false'>Use the Food Photo</span>
</p>

JavaScript

function switchImage(str) {
  var newImage = "https://cldup.com/s_1G4hE8_G.png";
  if (str == "barn"){
  	newImage = "https://cldup.com/xMbTH2XUJz-3000x3000.png";
  }
  console.log(newImage);
  var img = document.getElementById("myimage");
  console.log(img);
  img.src = newImage;
  
  var realWidth = img.naturalWidth;
  var realHeight = img.naturalHeight;
  
  // and here I'd probably put some calculations in to ensure it doesn't get too big.
  
  img.setAttribute("width", realWidth);
  img.setAttribute("height", realHeight);
}