html - 当内部图像缩放时，包装 div 不会调整大小(窗口调整大小的结果)

Question

我希望我的图像随着窗口高度的变化而调整大小，同时保持包含的 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 (尝试调整结果面板的大小)

更新:

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

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

更新#2:

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

Answer 1

我猜你将不得不求助于 JavaScript:

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

JSFIDDLE