Get images to resize vertically

I managed to get images to respect the max-width of the container开发者_高级运维 but when I try to do the same with max-height the images just get chopped off at the bottom. What's wrong?

http://jsfiddle.net/HsPtp/7/

You need to set the img styles "height" and "width" to 100%

#post_holder img{
   width:100%; 
   height:100%;  
}

Then control the size of it by adjusting the size of the wrapping div.

#post_holder{
  border:1px solid red; 
  width:50px;
  height:300px; 
}

I gave the wrapping div a red border just to see the size of it. I created an example in jslint.com http://jsfiddle.net/CQyHJ/

It's because the div you have your image in has other stuff in it above the image, so 100% height of that div is more room than you have for the image.