从css加载图像时无法在Firefox中更改图像高度答案

【问题标题】：Cannot change image height in Firefox when loading image from css从css加载图像时无法在Firefox中更改图像高度
【发布时间】：2015-06-04 07:21:21
【问题描述】：

我有一个从 css 加载的非常简单的 img。图片的高度为 300px，我正在尝试将其垂直拉伸到 700px：

<div>
    <img class="test">
</div>

目前我有它：

.test:after {
    min-height:700px;
    height:700px;
    content: url('/test.png');
    overflow:hidden;
    display:block;
    width:100%;
}

这在 Chrome 中完美运行。在 Firefox 中，图像不会拉伸；它保持原来的高度，下面有一大块空地。所以我用background-image: url(...)和background-repeat: no-repeat替换content: url(...)。但结果还是一样。

为什么 Firefox 在这两种情况下都不垂直拉伸我的图像？如何拉伸图像？

另外，我知道我可以使用 src，但我想从 css 加载它并且不使用任何 javascript。

【问题讨论】：

【解决方案1】：

来自

https://css-tricks.com/almanac/properties/c/content/

图片

div::before {
  content: url(image.jpg);
}

这实际上是页面上的图像。它可能也是一个渐变。 请注意，您无法更改以这种方式插入时的图像。

但就在这一点上，他们正在提供解决方案：

您还可以使用空字符串插入图像，内容为空字符串，使其显示：以某种方式阻止，调整大小它，并使用背景图像。这样你就可以重新调整它的大小背景尺寸。

【讨论】：