title: resize image by area
body: <p>I am trying to write a javascript function to resize an image based on a given area (or in my case (somewhat inaccurate) 'average dimension' since that's easier to think in terms of. Rather than feeding in maximum height and width, I want to feed in maximum area so that long or narrow images will appear visually to be roughly the same size.</p>
  
  <p><img src="https://i.stack.imgur.com/XZjNG.png" alt="enter image description here"></p>
  
  <p>I'm getting really caught on the math aspect of it, though... just how to logic it, as I haven't done much math of late.</p>
  
  <p>Basically, given an aspect ratio I want to determine the maximum size within an area.</p>
  
  <p>Something like this:</p>
  
  <pre><code>function resizeImgByArea(img, avgDimension){
      var w = $(img).width();
      var h = $(img).height();
      var ratio = w/h;
      var area = avgDimension * avgDimension;
      var targetHeight //something involving ratio and area
      var targetWidth //something involving ratio and area
      $(img).width(targetWidth);
      $(img).height(targetHeight);
  }
  </code></pre>
  
  <p>Not sure if this is on topic here, but I'm not able to brain it.</p>