title: Center and resize a container div dynamically based on image inside
body: <p>I need to have a container div with an image inside.</p>
  
  <p>The container div must be centered horizontally AND it must only take up as much space as its content, the image, has.</p>
  
  <p>The image inside must resize with the window size.</p>
  
  <p>I've tried to achieve this with display: inline-block; - It works when resizing the window horizontally, but not when resizing vertically.</p>
  
  <p>Check out this fiddle <a href="http://jsfiddle.net/J86L9" rel="nofollow">http://jsfiddle.net/J86L9</a> - resize the window horizontally and vertically to see the "bug".</p>
  
  <p>EDIT: Safari does it right, while Chrome does not resize the container but the image and Firefox does nothing at all. I think it could have to do with the max-height property?</p>
  
  <pre><code>#wrap {
      text-align: center;
  }
  
  #container {
      display: inline-block;
      border: 1px solid red;
      max-width: 75%;
      max-height: 75%;
  }
  
  img {
      display: block;
      max-width: 100%;
      max-height: 100%;
  }
  </code></pre>