title: CSS - image ignores max-height in fluid container - jsFiddle inside
body: <p>Exmaple:
  <a href="http://jsfiddle.net/vjqjv/7/" rel="nofollow">http://jsfiddle.net/vjqjv/7/</a></p>
  
  <p>I have an image inside of a container (see #slider-section in the jsFiddle) which has a fluid height and a fixed max-height.</p>
  
  <p>I have set max-height and max-width on my image to 100% (see #slider-img).</p>
  
  <p>The Problem: When the browser window gets beyond a certain width, the image ignores the max-width and max-height setting and just gets larger then its container.</p>
  
  <p>You can see it if you open the jsFiddle and expand the width of the browser.</p>
  
  <p>The goal is to get the image to never exceed the width and height of its container and keep its aspect ratio.</p>
  
  <p>This could be achieved by giving the container (#slider-section) a fixed height. However this is not a possible solution for me since it needs to be a fluid height.</p>
  
  <p>Does anyone have a solution?</p>