1. 首頁
  2. 問答
  3. css - 在Firefox中奇怪的圖像拉伸

css - 在Firefox中奇怪的圖像拉伸

2017-10-09 63 views
1

我目前正在測試出img標籤的CSS。在鉻看起來不錯，但是當我在Firefox中查看它時，最後一張圖像被拉伸。我不確定有什麼問題。以下是我的jsfiddle，當您在Chrome和Firefox中查看它時，您可以看到其中的差異。css - 在Firefox中奇怪的圖像拉伸

.thumbContainer img{ 
    margin: 0 auto; 
    max-width:100%; 
    max-height:100%; 
    object-position: 50% 50%; 
    object-fit: fill !important; 
}

來源

2017-10-09 rory-h

+1

'display：-moz-box' and'display：box'？這是一個8/9年的規格升級2倍...更新你的代碼到'flexbox'，一切都會按預期工作（你甚至可以省去'-moz'前綴...... –

回答

1

出現這種情況，因爲你使用的瀏覽器特定CSS屬性，如-moz-box或-webkit-box，這是不正式支持。這會在不同的瀏覽器中導致不同的行爲，因爲它取決於瀏覽器決定如何顯示這些元素，而對於Firefox，「正確的」行爲是爲了加強它，而爲了將其正確地鑲嵌到其父級中。我的一般建議是：避免使用帶前綴CSS屬性的樣式，除非在舊版瀏覽器中啓用標準CSS功能是絕對必要的。也許有flexbox您的問題有另一種方法。

來源

2017-10-09 07:57:54

相關問題

 相關問題