html - Firefox 中的对象适合意外结果

Question

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

我正在使用 Materialize.css 的“卡片”组件.我有这张卡片，上面有一张图片，我已将 object-fit css3 属性应用于该图片。该属性在 Google Chrome 上运行良好，但是，在应该支持 object-fit 属性的 Firefox 上，图像并没有像我预期的那样出现。我已经尝试搜索可能的 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>

如何在火狐等浏览器上实现object-fit的效果？

Answer 1

在修改了 CSS 之后，我得到了以下内容:

Materialize.css 插件中 waves-effect 类的 will-change: opacity, transform 属性导致 object-fit以防止行为不当。为此，我为受影响的 div 重置了 will-change: auto 的值。