Resizing image of unknown size and aspect ratio
<p>I basically have a group of images of unknown sizes.  Some may have a <strong>width > height</strong> and vice versa.</p>

<p>I need to display these items scaled to fit in a <strong>300x300</strong> box. Some of these images are smaller than <strong>300x300</strong> and need scaled up and some are larger and need scaled down.</p>

<p>So basically if I have an image that is <strong>100x200</strong>, I need it to display at <strong>150x300</strong> and if I have an image that is 800x400 it needs to display as <strong>300x150</strong>.</p>

<blockquote>
  <p>ie one of the dimension need to be fit on the box and other dimension
  need to be resize as aspect ratio.</p>
</blockquote>

<p>Since this is a user selected object in a database, I initially tried this in javascript but I'm struggling.  I'm curious if there's a purely CSS way to do this.</p>