img标记的父div不会在Chrome中获得大小

Question

这个问题有点复杂，我花了好几个小时才找到错误的原因。

我有一个#container，带有img标签。 #container高度是动态的，我用JavaScript计算它。该图像具有以下样式：

max-height:100%;
width:auto;
display:block;

#container没有任何特殊属性：

position:relative;
display:inline-block;

如您所见，我想调整图像大小以适应#container。

当我在本地机器上执行时，＃container没有达到img的大小，看起来它是100％。

与img：

相同

当我将它上传到在线开发服务器时，我感到很惊讶，因为一切看起来都很棒..直到浏览器从缓存加载图像时下一次刷新。

如果浏览器必须等待图像一切正常，但是当图像立即加载时会出现问题。

我在底部加载了javascript，但我也在标题中尝试了它。解决方案是什么？

修改

function seteHeight() {
    var headerHeight = $('header').height();
    var footerHeight = $('footer').height();
    var viewportHeight = $(window).height();
    $('#container').css({
        'height': viewportHeight-footerHeight-headerHeight-40+'px',
    });
}

$(document).ready(function(){
    setHeight();
});

EDIT2：

以下是jsfiddle链接：http://jsfiddle.net/pted5bs1/5/ 尝试使用Chrome（简单刷新，CTRL + R）

Answer 1

我不知道这是否是您正在寻找的，我不知道这是否是一个黑客。 我所做的就是将CSS更改为：

img 
{
    display: block;
    width: auto;
    height: inherit;
}

Answer 2

改变你的

 $(document).ready(function(){
            $('#container').css({
                'height': '200px',
            });
        });

到

$(window).load(function(){
        $('#container').css({
            'height': '200px',
        });
    });

它可能会修复它。