title: How to have fluid height in css?
body: <p>I'm trying to make slide down effect on some items, on hover the image will slide down and show the content, the problem is when you resize the browser the images resize too because I have</p>
  
  <p><code>img { max-width: 100%; }</code> </p>
  
  <p>but the problem is I can't have a fluid height too, I can't use percentage height on them.
  This is what's happening:</p>
  
  <p><a href="http://codepen.io/joe/pen/yLjEx" rel="nofollow">http://codepen.io/joe/pen/yLjEx</a></p>
  
  <p>I set the background as black to see what's happening, and I currently have height 210px.</p>
  
  <p>So how can fix this issue ?</p>