css - 图像在firefox中奇怪地伸展

Question

我正在测试img标签的css。在Chrome上看起来不错，但是当我在firefox中查看它时，最后一张图像被拉伸了。我不确定是什么问题。下面是我的jsfiddle，您可以在Chrome和Firefox中查看它的区别。

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

Answer 1

这种情况会发生，因为您使用的是-moz-box或dymosim.exe等特定于浏览器的CSS属性，这些属性不受官方支持。这可能会导致不同浏览器中出现不同的行为，因为浏览器决定如何显示这些元素，而对于Firefox来说，“正确”的行为是拉伸它，而对于chrome来说，它的正确性适合其父级。我的一般建议是：避免使用带有前缀CSS 属性的样式，除非在旧版浏览器中启用标准CSS功能是绝对必要的。也许还有另一种方法可以解决flexbox的问题。