Firefox 中的对象适合意外结果

Question

由于声誉限制，我无法 post 图片。但是 this 是我要显示的图像的 link。

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

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 之后，我得到了以下结果：

Materialize.css 插件中 waves-effect class 的 will-change: opacity, transform 属性导致 object-fit 无法正常运行。我通过为受影响的 div 重置 will-change: auto 的值来做到这一点。

Firefox 中的对象适合意外结果

object-fit unexpected result in firefox

html

css

materialize