2014-09-04 51 views
0
  • 我有一個<img>元件(上載圖像預覽幀),其scr將由Javascript,設置,如何防止空img元素收縮?

  • 所以當最初被加載它,它有在它沒有圖像,我已經設置其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; 
} 

非常感謝你!

+0

我猜,FF不會渲染它,因爲它沒有來源。也許如果你添加一個替代文本('alt =「Image placeholder」'),它會顯示在正確的維度。 – LinkinTED 2014-09-04 13:54:59

+0

我這樣做,[** placehold.it **](http://placehold.it/),我更喜歡在那裏有一個圖像,placehold.it是爲了做到這一點。無論如何只是一個想法。它更適合你說它的大小。 – Ruddy 2014-09-04 13:55:01

+0

我添加了一個alt,但它沒有顯示正確大小的邊框,它只是在其周圍顯示一個緊框的alt文本:Users Picture Ormoz 2014-09-04 13:58:41

回答

2

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

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

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

它通過使用內聯塊工作。我還添加了一個alt屬性。感謝您的寶貴幫助 – Ormoz 2014-09-04 14:09:57