html - 如何防止空的 img 元素收缩？

Question

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

• 所以当它最初加载时，里面没有图像，我已经设置了它的 width和 height通过 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;
}