由于声誉限制,我无法发布图片。但是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
的效果?
最佳答案
在修改了 CSS 之后,我得到了以下内容:
Materialize.css 插件中 waves-effect
类的 will-change: opacity, transform
属性导致 object-fit
以防止行为不当。为此,我为受影响的 div
重置了 will-change: auto
的值。
关于html - Firefox 中的对象适合意外结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32331574/