title: Maintaining aspect ratio with min/max height/width?
body: <p>I have a gallery on my site where users can upload images.</p>
  
  <p>I would like the images to sit in a div that maintains its height, the images should be no larger than 500px in height. The width should be automatic to maintain aspect ratio.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="gallery"&gt;
      &lt;img src="uploads/my-dynamic-img.jpg"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've tried this CSS:</p>
  
  <pre><code>#gallery{
      height: 500px;
  
      img{
          max-height: 500px;
          max-width: 100%;
      }
  }
  </code></pre>
  
  <p>The above works well, the gallery is always 500px high and images never exceed 500px in height. I run into problems though with smaller images, if a user uploads a really small image, I would like it 'blown up' to a minimum of 200px. I know this can be achieved by setting a <code>min-height</code> on the image, the problem with this is, if the image is less than 200px in height but say, 2000px wide, the image gets blown up to 200px in height, but then the aspect ratio is screwed, as the image is wider than the images parent div.</p>
  
  <p>How can I have a min height but retain aspect ratio?</p>