当内部图像缩放时，包裹 div 不会调整大小（窗口大小调整的结果）

我希望我的图像随着窗口高度的变化而调整大小，同时保持包含的 div 收缩包裹图像。我尝试使用：

<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;
}

但它似乎没有按预期工作。这div不收缩。一旦我在调试器中使用 css 属性，它实际上就会发生。

这里是fiddle http://jsfiddle.net/zhyv9/（尝试调整结果面板的大小）

Update:

现在这很奇怪。自从我第一次发布这个问题以来，浏览器行为发生了变化。最初（Chrome）当我调整窗口大小时，图像会按预期按比例缩小，但包装 div 将保持其原始宽度。现在发生的情况（Chrome 更新？）是图像不会水平缩小，div 也不会水平缩小。

我用最新的 Safari 和 Firefox 尝试过。两者都会缩小图像但保持原始 div 宽度。因此，请在其他浏览器上检查您的解决方案。

更新#2：

div 必须保持块类型，因为我需要将其他元素放置在图像的角落。

我想你必须求助于 JavaScript：

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

JSFIDDLE http://jsfiddle.net/zhyv9/20/