title: Need image to match the size of a flexible parent wrapper
body: <p>I am attempting to create an image gallery that stays centered on the page and has a max height/width of 85% of the browser window. Here are the goals:</p>
  
  <ul>
  <li>Absolutely no Javascript (and no we don't want a 3rd party solution)</li>
  <li>image should always be exactly the same size as the wrapper (except padding/border/margin)</li>
  <li>image should never go beyond the 85% max width/height set on the wrapper</li>
  </ul>
  
  <p>The issue is that when I have a very tall (or wide) image, the img will ignore the parents max-height and run outside its wrapper .</p>
  
  <ul>
  <li>Overflow doesn't seem to work (we don't want scroll bars).</li>
  <li>Setting the img height/width to 100% doesn't seem to work and I'm assuming this is because its parent is absolute positioned?</li>
  <li>Can't set height/width (only max) of the wrapper div because if the image is smaller there will be a bunch of white space. Again, we want to do this without JavaScript.</li>
  </ul>
  
  <p>Sorry in advance for the inline styles.</p>
  
  <pre><code>&lt;div id='wrap' style='position: absolute; top: XXXpx; left: XXXpx; max-width: 85%; max-height: 85%'&gt;
      &lt;img src='mypic.jpg'&gt;
      &lt;div id='leftArrow' style='position: absolute...'&gt;&lt;/div&gt;
      &lt;div id='rightArrow' style='position: absolute...'&gt;&lt;/div&gt;
      &lt;div id='thumbnails' style='position: absolute...'&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>