图像已加载但未在firefox上的localhost应用程序中显示

Question

我已经用Google搜索了这个问题，我找到了几个答案。他们中的大多数人建议清理缓存和cookie，我这样做但是没有用。

我想在我的应用程序中显示图像。当我在Firefox中检查开发人员设置时，我的图像已加载，但未显示。它还说，即使我将宽度和高度设置为100px和80px，其内容也是0x20。我甚至试过了！important语句，但它仍然显示0x20。

在谷歌浏览器中，它可以正常运行，但在Firefox中却没有。

这个问题实际上似乎很容易解决，但我真的无法找到它为什么不起作用，我尝试了很多选项，但似乎都没有。

有什么想法吗？

修改

HTML

<i class="icon"></i>

CSS

.icon {
     width: 100px;
     height: 80px;
     content: url(../imgs/icon.png);
 }

Answer 1

您尝试向某个元素添加content。

content仅受:before和:after支持。请参阅W3C。

<i>是inline元素，通过css给它宽度/高度添加为inline-block。

将您的CSS更改为以下内容应该有效，可以添加display: inline-block;

.icon:before {
    width: 100px;
    height: 80px;
    content: url(../imgs/icon.png);
}

这将改变之前的大小，只有在使用响应式SVG时，图像大小才会改变。

我更喜欢使用background方法：

HTML：

<i class="icon"></i>

CSS：

.icon {
    display: inline-block;
    width: 100px;
    height: 80px;
}
.icon:before {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background: url(//via.placeholder.com/150x75) no-repeat;
    background-size: contain;
}

这将根据容器大小更改图像。使用background-size: contain时，比例会保留。使用content时需要before。

Try out.