title: Resizing image of unknown size and aspect ratio
body: <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>