如何防止空的img元素收缩？答案

【问题标题】：How to prevent an empty img element from shrinkage?如何防止空的img元素收缩？
【发布时间】：2014-10-29 07:26:22
【问题描述】：

我有一个<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;
}

非常感谢！

【问题讨论】：

我猜FF不会渲染它，因为它没有来源。也许如果您添加替代文本 (alt="Image placeholder")，它将显示在正确的尺寸中。
我就是这样做的，placehold.it，我更喜欢在里面放一张图片，placehold.it 就是为此而生的。反正对你来说只是一个想法。对你来说更好的是它说的大小。
我添加了一个 alt，但它没有显示大小合适的边框，它只是显示了 alt 文本，周围有一个紧凑的框：

【解决方案1】：

您可以通过制作<img> display:block; 或display: inline-block; 来防止缩小

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

【讨论】：