css - Firefox 不会在 flexbox 内缩放图像

问题描述

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

我正在尝试使用 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 相同

你们有没有人经历过类似的事情？

标签： cssfirefoxflexboxcross-browserscale

css - Firefox 不会在 flexbox 内缩放图像

问题描述

混合

风格

html

解决方案

推荐阅读