当内部图像缩放(窗口调整大小的结果)时,不会调整包装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属性,它实际上就会这样做.

这是小提琴(尝试调整结果面板的大小)

更新:

现在这很奇怪.自从我第一次发布此问题以来,浏 最初(Chrome),当我调整窗口大小时,图像将按预期成比例缩小,但包装div将保持其原始宽度.现在发生了什么(Chrome更新？)是图像不会水平缩小,而div也是.

我尝试使用最新的Safari和Firefox.两者缩小图像但保持原始div宽度.所以请善待在其他浏览器上查看您的解决方案.

更新#2:

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

Answer 1

添加这个小技巧对我有用。据我了解，它迫使浏览器重绘/重排其内容。小提琴。我不明白为什么浏览器不自动完成此操作。在 Firefox、Chrome 和 Safari 上进行了测试。

window.onresize = function() {
    $(".thumb").each(function() {
        this.style.display = "none";
        this.offsetWidth;
        this.style.display= "inline-block";
    })
}