如何防止空img元素收縮？

Question

• 我有一個<img>元件（上載圖像預覽幀），其scr將由Javascript，設置，

• 所以當最初被加載它，它有在它沒有圖像，我已經設置其width和由css在性能上保持其大小和位置（事實上，它是暗示用戶知道什麼是適當的長寬比爲所需的圖像）。

• 此代碼在IE和Chrome中運行良好，但問題在於Firefox不保留幀的初始大小（當爲空）並縮小到零大小。

我怎樣才能解決這個問題？

代碼：

<img width="90" height="120" class="uploadPreview" id="Preview_pic" > 

CSS：

img.uploadPreview { 
    width:90px; 
    height:120px; 
    border-style:groove; 
} 

非常感謝你！

Answer 1

您可以防止收縮通過使<img>display:block;或display: inline-block;

演示：http://jsfiddle.net/sp8n67u1/1/

img.uploadPreview { 
    width:90px; 
    height:120px; 
    border-style:groove; 
    display: block; 
}