当内部图像缩放（窗口调整大小的结果）时，不调整包围div， [英] Wrapping div is not resized when inner image scales (a result of window resize)

问题描述

我想要我的图像调整为窗口高度变化，同时保持包含div收缩包装图像。我尝试使用：

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

但它似乎没有按预期工作。 div 不会收缩。

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)

更新：

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

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.

我用最新的Safari和Firefox试过。两者收缩图像，但保持原始的div宽度。

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.

更新＃2：

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

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

推荐答案

添加这个小黑客为我工作。对我的理解，它强制浏览器重绘/回流其内容。 小提琴。我不知道为什么这不是由浏览器自动完成。在Firefox，Chrome和Safari上测试。

Adding this little hack worked for me. To my understanding it forces the browser to redraw/reflow its contents. Fiddle. I can't figure out why this isn't done automatically by the browser. Tested on Firefox, Chrome and Safari.

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

这篇关于当内部图像缩放（窗口调整大小的结果）时，不调整包围div，的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！