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

我目前正在测试出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

'display：-moz-box' and'display：box'？这是一个8/9年的规格升级2倍...更新你的代码到'flexbox'，一切都会按预期工作（你甚至可以省去'-moz'前缀...... –

出现这种情况，因为你使用的浏览器特定CSS属性，如-moz-box或-webkit-box，这是不正式支持。这会在不同的浏览器中导致不同的行为，因为它取决于浏览器决定如何显示这些元素，而对于Firefox，“正确的”行为是为了加强它，而为了将其正确地镶嵌到其父级中。我的一般建议是：避免使用带前缀CSS属性的样式，除非在旧版浏览器中启用标准CSS功能是绝对必要的。也许有flexbox您的问题有另一种方法。

来源

2017-10-09 07:57:54

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

回答

相关问题