css-图像在firefox中被奇怪地拉伸

我目前正在测试img标签的css。在chrome上看起来不错，但当我在firefox中查看它时，最后一张图片被拉长了。我不知道怎么了。下面是我的JSFIDLE，当您在Chrome和Firefox中查看它时，您可以在其中看到差异

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

---

这是因为您使用的是特定于浏览器的CSS属性，如或

-webkit-box

，这些属性不受官方支持。这会在不同的浏览器中导致不同的行为，因为如何显示这些元素取决于浏览器，而对于Firefox，“正确”的行为是，拉伸它，而对于chrome来说，正确的行为是适合其父浏览器。我的一般建议是：避免使用带有前缀的CSS属性设置样式，除非在旧浏览器中启用标准CSS功能是绝对必要的。也许有另一种方法可以解决您的问题。

display:-moz-box

和

display:box

？这是一个有8/9年历史的规范，升级了2次…将您的代码更新到

flexbox

，一切都将按预期工作（您甚至可以省略

-moz

前缀。。。