Question

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

我正在尝试使用flexbox对齐图像，保持其宽高比，并在其下方具有透明背景（请检查以下图像）。我通过创建一个全高的父容器解决了这个问题，该容器包含4行（第一行是标题，第二行是徽标，第三行是社交链接，第四行是人字形下拉图标）因此父容器具有flex-direction：包含这4个的行。在徽标容器内，我有一个带有flex-direction：列的父列容器，其中包含2个带flex：1的空div和我的应用徽标。

Mixins

=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是固定的，但铬/操作符破裂，并且它们使图像居中（由于对象匹配：包含），在边缘处留有空格（也是预期的行为），如果我从html中完全删除了img，则网格与chrome / opera相同

你们有没有经历过类似的经历？

Answer 1

我认为您使用奇怪的复杂方法（使用额外的空列，<?php $USER_ID = user_2 $condition = implode(',',$arraySearchRecord); $condition = rtrim(',',$condition); //used to remove the last $sql='SELECT * from myTable WHERE userId = "$USER_ID" AND documentId IN ($clause)'; $result = $MYSQLI -> query($sql); ?>和困难的方法）。在这里，我仅在一种或两种情况下使用过object-contain，align-items和text-align，问题就解决了：

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

Answer 2

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

这对我有用：

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

Firefox无法在flexbox中缩放图像

Mixins

样式

HTML

2 个答案: