Firefox 不会在 flexbox 内缩放图像

Question

编辑：这是一个代码笔和一个展示问题的屏幕截图

Codepen

我正在尝试使用 flexbox 使图像居中对齐，保持其纵横比，并在其下方具有透明背景（检查下面的图像）。 我通过创建一个全高宽度的父容器来解决这个问题，它包含 4 行（第一行是标题，第二是徽标，第三是社交链接，第四是 chevron-down-icon） 所以父容器有 flex-direction: row 包含这 4 个。 在徽标容器中，我有一个带有 flex-direction: 列的父列容器，其中包含 2 个带有 flex: 1 的空 div 和我的应用程序徽标。

混合

=full-height-width
  width: 100%
  height: 100%

=fill($background-color: null)
  flex: 1
  display: flex
  height: 100%

=flex-center-contents
  display: flex
  justify-content: center
  align-items: center

// grid mixins
=row($z-index: auto)
  display: flex
  flex-direction: column
  z-index: $z-index
  flex-wrap: nowrap

=column($z-index: auto)
  display: flex
  flex-direction: row
  z-index: $z-index
  flex-wrap: nowrap

样式

// Grid implementation
.fill
  +fill($logo-background-color)
  z-index: $not-animated-background-z-index

.parent-row-container
  +full-height-width()
  +row($not-animated-background-z-index)

.parent-column-container
  +full-height-width()
  +column($not-animated-background-z-index)
#parent-container
  +full-height-width()
  #social-container, #name-container, #logo-container
    flex: 1

  #social-container, #name-container
    background-color: $logo-background-color
    +flex-center-contents()
    z-index: $not-animated-background-z-index

  #name-container
    > #name
      color: $home-primary-text-color
      font-family: $font-stack-sci-fi
      font-size: $name-font-size

      text-align: center
      user-select: none

  #logo-container
    display: flex

    > #logo-img-wrapper

      > #logo
        max-height: 100%
        max-width: 100%
        object-fit: contain

  #social-container
    display: flex
    flex-wrap: wrap

    > .social-icon
      font-size: $social-icon-font-size

      min-width: 85px
      +media("<=tablet")
        min-width: 45px

      text-align: center


  #bottom-arrow-container
    background-color: $logo-background-color
    padding-bottom: 1rem
    +flex-center-contents()
    z-index: $not-animated-background-z-index

HTML

<div class="parent-row-container">
  <!-- Row -->
  <div class id="name-container">
    <p id="name">
      Artist name
    </p>
  </div>
  <!-- End Row -->

  <!-- Row -->
  <div id="logo-container" class="parent-column-container">
    <!-- Column -->
    <div class="fill"></div>
    <!-- Column -->
    <div id="logo-img-wrapper">
      <img id="logo" src="@img/home/logo.png" />
    </div>
    <!-- Column -->
    <div class="fill"></div>
  </div>
  <!-- End Row -->

  <!-- Row -->
  <div class="fill">
    <!-- Column -->
    <div id="social-container">
    </div>
  </div>
  <div id="bottom-arrow-container">
    <font-awesome-icon class="selectable" :icon="['fa', 'chevron-down']" :style="{ color: 'white'}" />
  </div>
</div>

在 Chromium/opera 上运行时会导致以下结果（预期）

但是 Firefox 会产生这个

这与 Firefox 如何处理百分比宽度有关吗？ 如果我修改 img 容器并将 flex: 1 放在图像容器上，firefox 是固定的，但是 chromium/opera 中断，并且它们使图像居中（因为 object-fit：contain）在边缘留下空间（也是预期的行为） ，如果我从 html 中完全删除 img，则网格与 chrome/opera 相同

你们有没有遇到过类似的事情？

Answer 1

在 firefox 34.0.5 之后 Flexbox 不再工作，但您可以通过 CSS 技巧将其修复为：

这对我有用：

img {max-width:100%; width:100%;}

Answer 2

我认为您使用了异常复杂的方法（使用额外的空列，object-contain 和硬方法）。这里我只是用了align-items,text-align和justify-content一两种情况，问题就解决了：

https://codepen.io/anon/pen/NOOZqb