對象在Firefox中意外的結果

由於名譽限制，我無法發佈圖片。但this是我想要顯示的圖像的鏈接。對象在Firefox中意外的結果

我使用Materialize.css的「卡」的組成部分。我有這張卡上面有一張圖片，我已將object-fit css3屬性應用於該圖片。該酒店在谷歌瀏覽器上運行良好，但是，在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>

如何實現object-fit對Firefox和其他瀏覽器的效果？

來源

2015-09-01 KevinT.

與CSS修補後，這裏是我的本錢：

在Materialize.css插件waves-effect類的will-change: opacity, transform屬性導致object-fit從表現正常，以防止。我通過重置受影響div的will-change: auto的值來做到這一點。

來源

2015-09-01 13:09:24

對象在Firefox中意外的結果

回答

相關問題