Wrapping div is not resized when inner image scales (a result of window resize)

Question

I want my images to resize as the window height changes while keeping the containing div shrink wrapping the image. I tried using:

<div>
    <img src="http://akamaicovers.oreilly.com/images/9780596806767/cat.gif" alt="">
</div>

html, body {
    height: 100%;
    width: 100%;
}

div {
    height: 90%;
    background-color: black;
    display: inline-block;
}

img {
    height: 100%;
    width: auto;
}

But it doesn't seem to work as expected. The div doesn't shrink. It actually does once I play around with the css properties in debugger.

Here is the fiddle (try resizing the result panel)

Update:

Now this is strange. Since I first posted this question the browser behaviour changed. Originally (Chrome) when I resized the window the image would shrink proportionally as expected but the wrapping div would keep its original width. What happens now (Chrome update?) is that the image doesn't shrink horizontally, and the div also.

I tried it with the latest Safari and Firefox. Both shrink the image but keep original div width. So please be kind to check your solutions on other browsers as well.

Update #2:

The div has to stay of block type as I need to place other elements in the corners of the image.

Answer 1

I guess you'll have to resort to JavaScript:

$(window).on('resize', function (){ 
    $('div').width($('img').width());
});

JSFIDDLE

Answer 2

You just have to keep your image max-height to be 100%. Thats it.

Here is the Working Solution

The HTML:

<div>
    <img src="http://akamaicovers.oreilly.com/images/9780596806767/cat.gif" alt="">
</div>

The CSS:

html, body {
    height: 100%;
    width: 100%;
}

div {
    height: 90%;
    background-color: black;
    display: inline;
}

img {
    max-height: 100%;
    max-width: 100%;
    height: 100%;
}

EDIT

Updated CSS for the img class to make the image fit the full div. Here is the working solution for the edit.

img {
    max-height: 100%;
    max-width: 100%;
    height: 100%;
    display:block;
}

Hope this Helps.