我目前正在测试 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;
}
最佳答案
发生这种情况是因为您正在使用特定于浏览器的 CSS 属性，例如 -moz-box或 -webkit-box，官方不支持。这可能会在不同的浏览器中导致不同的行为，因为由浏览器决定如何显示这些元素，对于 Firefox 来说，“正确”的行为是拉伸(stretch)它，而对于 chrome 来说，它是正确的以适应其父元素。我的一般建议是:避免使用带有前缀 CSS 属性的样式，除非绝对有必要在旧版浏览器中启用标准 CSS 功能。也许有另一种方法可以解决您的问题 flexbox .
关于css - 图像在 firefox 中奇怪地拉伸(stretch)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46640674/