Parent div 的 img 标签没有得到 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，但我也在 header 中尝试过。解决方法是什么？

编辑：

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

编辑 2：

这是 jsfiddle link：http://jsfiddle.net/pted5bs1/5/ 尝试 Chrome（简单刷新，CTRL+R）

Answer 1

改变你的

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

至

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

它可能会修复它。

Answer 2

我不知道这是否是您要查找的内容，我也不知道这是否是黑客攻击。我所做的只是将 CSS 更改为：

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

Parent div 的 img 标签没有得到 Chrome 中的尺寸

Parent div of img tag doesn't get the size in Chrome

jquery

css

responsive-design

height