css - 图像在Firefox中奇怪地拉伸答案

【问题标题】：css - image stretched weirdly in firefoxcss - 图像在Firefox中奇怪地拉伸
【发布时间】：2018-03-20 07:44:05
【问题描述】：

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

【问题讨论】：

display: -moz-box 和 display: box?这是一个 8/9 年前的规范，升级了 2 次...将您的代码更新为 flexbox，一切都会按预期工作（您甚至可以省略 -moz 前缀...

标签： css firefox

【解决方案1】：

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

【讨论】：