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

Posted 2023-02-22

【中文标题】如何使用 flex-grow 使图像填充 flex 项目？

【英文标题】：How to make an image fill a flex item with flex-grow?

【发布时间】：2019-05-18 13:47:13

【问题描述】：

我已经阅读了所有现有解决方案，其中图像可以填充包含的 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/

【问题讨论】：

你可以在css中使用图像作为背景图像而不是在html中使用img标签吗？

您能否澄清您的问题，因为您的代码完全按照它应该做的......

@rypskar URL 只是一个占位符，我打算从其他地方提供 URL。即作为我在反应中这样做的道具。

你可以从 react 中设置 CSS 属性，你可以直接在元素上使用一些 react 魔法或者设置样式

【参考方案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>

【讨论】：

很抱歉我不够清楚。我想从其他地方传递图像 URL。我希望网址是动态的。

这里是如何在反应中动态更改背景图像：***.com/questions/27966468/…

【参考方案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

【讨论】：

直到现在我才知道 flex-basis。谢谢。