如何防止空img元素收缩？

Question

• 我有一个<img>元素（上传图片预览框），其scr将由javascript设置，

• 因此，当它最初加载时，它没有图像，我已经通过css设置了它的width和height属性，以便在启动时保持其大小和位置（事实上，它提示用户知道所需图像的正确纵横比是多少。

• 此代码在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;
}