如何使用 flex-grow 使图像填充 flex 项目？

Question

我已经阅读了所有现有解决方案，其中图像可以填充包含的 div，但我还没有找到填充没有静态维度的 div 的解决方案，例如仅由 flex-grow 布置的 div。

目前图像会破坏我在容器上设置的flex-grow 比例。我希望 img 只填充 div 而不是拉伸 div。

我尽量不要内联样式。

是否有现有的 polyfill 或解决方案？

.container {
  display: flex;
  min-height: 300px;
  width: 500px;
  flex: 1;
}

.sub-container {
  flex: 1;
  display: flex;
  flex-direction: row;
}

.sub-container > div {
  flex-grow: 1;
}

.first-container {
  background-color: blue;
}

.second-container {
  background-color: yellow;
}

.second-container>img {
  max-height: 100%;
  max-width: 100%;
  object-fit: scale-down;
}

<div class="container">
  <div class="sub-container">
    <div class="first-container">
      A
    </div>
    <div class="second-container">
      <img src="https://internationalbarcodes.net/wp-content/uploads/2017/04/QR%20code%20example.jpg" />
    </div>
  </div>
</div>

http://jsfiddle.net/jojonarte/tu3nbw4q/

Answer 1

使用background-image 代替img 标签并使用background-size: 100% 100%;：

See fiddle

.container {
  display: flex;
  min-height: 300px;
  width: 500px;
  flex: 1;
}

.sub-container {
  flex: 1;
  display: flex;
  flex-direction: row;
}

.sub-container>div {
  flex-grow: 1;
}

.first-container {
  background-color: blue;
}

.second-container {
      background: url(https://internationalbarcodes.net/wp-content/uploads/2017/04/QR%20code%20example.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  
}

<div class="container">
  <div class="sub-container">
    <div class="first-container">
      A
    </div>
    <div class="second-container">

    </div>
  </div>

</div>

Answer 2

你的代码中有这个：

.sub-container > div {
  flex-grow: 1;
}

好的，这就定义了flex-grow。

但是你还没有定义flex-basis。因此，flex-basis 保持其默认值，即：auto (i.e., content-defined)。

这就是您所看到的布局：根据内容调整大小的弹性项目。

换句话说，由于图像的自然尺寸太大（与容器的大小相比），图像占用了所有可用空间，flex-grow 没有任何效果（它没有可用空间分发）。

作为解决方案，将其添加到规则中：

.sub-container > div {
  flex-grow: 1;
  flex-basis: 0; /* new */
}

或者，更有效：

.sub-container > div {
  flex: 1; /* fg:1, fs:1, fb:0 */
}

revised fiddle

.container {
  display: flex;
  min-height: 300px;
  width: 500px;
}

.sub-container {
  flex: 1;
  display: flex;
  flex-direction: row;
}

/* ADJUSTMENT HERE */
.sub-container > div {
  flex: 1;
}

.first-container {
  background-color: blue;
}

.second-container {
  background-color: yellow;
}

.second-container>img {
  max-height: 100%;
  max-width: 100%;
  object-fit: scale-down;
}

<div class="container">
  <div class="sub-container">
    <div class="first-container">A</div>
    <div class="second-container">
      <img src="https://internationalbarcodes.net/wp-content/uploads/2017/04/QR%20code%20example.jpg" />
    </div>
  </div>
</div>

更多信息：

• 为避免问题中描述的问题，作为一般规则，请使用flex 属性而不是单独使用flex-grow、flex-shrink 和flex-basis。

  来自 flexbox 规范：

  § 7.2.1. Components of Flexibility

  鼓励作者使用flex 控制灵活性 速记而不是直接使用其速记属性，因为 速记正确地重置任何未指定的组件以适应 common uses.

• 了解更多关于the difference between flex-basis: auto and flex-basis: 0