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中沒有獲得大小

回答

相關問題