img 标签的父 div 没有在 Chrome 中获得大小

Question

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

我有一个带有 img 标签的#container。 #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

我不知道这是否是你要找的，我不知道这是否是一个 hack。 我所做的只是将 CSS 更改为：

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

Answer 2

改变你的

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

到

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

它可能会修复它。