Possible to make parent honour width of child image? - html

Question

I am trying to make a parent element honour the width of a child image.
It works on load, but if you resize the height of the viewport to force a change in the image height, the parent element 'remembers' the initial size of the image and maintains that width.
If you mimic the above with width instead of height, there is no problem.
Here is a video of the behaviour: http://jmp.sh/8VEOZS8
Here is a codepen: http://codepen.io/iamkeir/pen/YWgvdw
html, body { height: 100%; }
.wrapper {
display: inline-block;
height: 100%;
border: 1px solid black;
}
img {
height: 100%;
}
<div class="wrapper">
<img src="http://placehold.it/1280x960" />
</div>
I'm interested to know:
1) why this is happening
2) if there is a way to fix it
Thanks!

Answer 1

You can fix it by setting max-width and max-height attributes to the image so it wont overflow the wrapper or the window. Then you can set the display: inline-block; to the wrapper instead which is nowadays used in replacement of floating elements. I set the image to be display: block; just so it will display it as a block element and eliminate weird space around it etc.
html, body { height: 100%; }
.wrapper {
display: inline-block;
border: 1px solid black;
}
img {
display: block;
max-width: 100%;
max-height: 100%;
}
<div class="wrapper">
<img src="http://placehold.it/1280x960" />
</div>