Try wrapping the image in another div. <img>
elements behave differently than <div>
elements when width
and height
are applied.
For example width: 100%
applied to <img>
means that the image element will have the same width as the source picture. If you apply width: 100%
to <div>
, it would have the same width as the first parent with defined width.
Thus, your desired html will be:
<div class='box'>
<div class='wrapper'>
<img src="http://placekitten.com/g/200/300" />
</div>
</div>
With corresponding css for wrapper
div:
div.wrapper {max-height:100%;}