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

问题有点复杂，我花了好几个小时才找到bug的原因。img标签的父div在Chrome中没有获得大小

我有一个#container，带有一个img标签。＃容器高度是动态的，我用JavaScript计算。图像有以下类型：

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

的#container的没有任何特殊的属性：

position:relative; 
display:inline-block;

正如你可以看到，我想调整图像大小以适应#container的。

当我在本地机器上做的#container没有得到img的大小，它看起来像是100％。

This is the #container

同样与IMG：

This is the 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）

来源

2015-03-03 user1452062

我们需要看到你的代码，以帮助。你的JS在哪里？ – Turnip 2015-03-03 12:58:20

我添加了javascript代码。 js目前位于之前的页脚中，但我在顶部尝试了它。 – user1452062 2015-03-03 13:07:03

你可以附加jsfiddle链接。谢谢 – 2015-03-03 13:32:35

我不知道这是你在找什么，我不知道这是否是黑客行为。我所做的只是改变CSS来此：

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

来源

2015-03-11 13:35:35

变化试试你的

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

到

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

，它可能会解决它。

来源

2015-03-10 15:28:36 ThanosDi

不幸的是，从缓存/本地加载映像时结果相同。 – user1452062 2015-03-10 15:43:31

http://jsfiddle.net/br97c05c/2/ 我也做了一个，它似乎没问题。无论哪种方式，如果您的#container的高度：200px图像应调整大小。 – ThanosDi 2015-03-10 15:55:47

Chrome：http://imgur.com/TDNkznV – user1452062 2015-03-10 16:11:05

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

回答

相关问题