firefox中的object-fit意外结果

Question

由于声誉限制，我无法发布图片。但this是指向我要展示的图片的链接。

我正在使用Materialize.css的“卡片”组件。我的这张卡上面有一张图片，我已将object-fit css3属性应用于该图片。该属性在Google Chrome上表现良好，但在Firefox上应该支持object-fit属性，图像不会像我预期的那样出现。我已经尝试搜索可能的css前缀，解决方法就像在div中重新包装它们，但这些都不起作用。这是我的代码：

CSS：

.card-officer .card-image img {
    object-fit: cover; /* Do not scale the image */
    object-position: center; /* Center the image within the element */
    height: 300px;
}

HTML：

<div class="card card-officer hoverable">
    <div class="card-image waves-effect waves-block waves-light">
        <div>
            <img class="activator" src="profile.jpg">
        </div>
    </div>
    <div class="card-content">
        <span class="card-title activator grey-text text-darken-4">Patrick Joshua Sarmiento</span>
        <h6>Public Information Officer</h6>
    </div>
</div>

如何在Firefox和其他浏览器上实现object-fit的效果？

Answer 1

在修补css之后，我就得到了：

Materialise.css插件中will-change: opacity, transform类的waves-effect属性会导致object-fit无法正常运行。我通过重置受影响will-change: auto的{​​{1}}值来完成此操作。