css - Firefox 不会缩放 flexbox 中的图像

Question

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

Codepen

我正在尝试使用 flexbox 将图像居中对齐，保持其纵横比，并在其下方设置透明背景(检查下图)。我通过创建一个包含 4 行的全高宽父容器来解决这个问题(第一行是标题，第二行是 Logo ，第三行是社交链接，第四行是一个向下的人字形图标)所以父容器有 flex-direction: row 包含这 4 个。在 Logo 容器内，我有一个带有 flex-direction: column 的父列容器，其中包含 2 个带 flex: 1 的空 div 和我的应用程序 Logo 。

混合

=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 中断了，它们使图像居中(因为对象适合:包含)在边缘留出空间(也是预期的行为)也，如果我从 html 中完全删除 img，网格与 chrome/opera 相同

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

Answer 1

我认为您使用了非常复杂的方法(使用额外的空列、object-contain 和硬方法)。这里我只是在一两种情况下使用了align-items、text-align和justify-content，问题就解决了:

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