title: Set an image to either 100% width or height, whichever comes first
body: <p>I have an image within a div and I want either the image to shrink to either 100% width or 100% height of the containing div.  As suggested <a href="https://stackoverflow.com/questions/3029422/image-auto-resize-to-fit-div-container">here</a>, I've tried setting both max-height and max-width to 100%.  This still causes some overflow (and I don't want to crop the image with overflow:hidden).  The image is floated within the div.</p>
  
  <p>Is it possible to accomplish this?  My code is below.  Am I doing something wrong?</p>
  
  <pre class="lang-css prettyprint-override"><code>div#_content div#_thumbnails div {
    padding:2px;
    display:inline-block;
    min-width:10%;
    max-width:25%;
    min-height:80px;
    max-height:125px;
    text-align:center;
  }
  div#_content div#_thumbnails img {
    display:inline;
    padding:2px;
    float:left;
    max-height:100%;
    max-width:100%;
  }
  </code></pre>
  
  <p>In the javascript below, imgs is a list of URL's.  thumbnails is a mother-div that the containers will sit in.</p>
  
  <pre><code>for (i in imgs) {
    if (imgs[i]) {
      var new_img = document.createElement('IMG'),
        container = document.createElement('DIV')
      new_img.setAttribute('alt', "image"+i.toString())
      new_img.setAttribute('src', imgs[i])
      container.appendChild(new_img)
      thumbnails.appendChild(container)
    }
  }
  </code></pre>
  
  <p>I hope this is isn't a dumb question, but I've searched and none of the suggestions I've found have worked.</p>