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

Question

我已经阅读了所有现有解决方案，其中图像可以填充包含的div，但是我还没有找到一种解决方案，该解决方案可以在没有静态尺寸的情况下填充div，例如仅由flex-grow布局的div。

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

我尽可能不要内联样式。

是否有现有的填充料或解决方案？

 .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

您的代码中包含以下内容：

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

好的，这定义了flex-grow 。

但是您尚未定义flex-basis 。 结果， flex-basis保持其默认值，即： auto （即，内容定义的） 。

这就是您所看到的布局：一个根据内容确定大小的弹性项目。

换句话说，由于图像的自然尺寸非常大（与容器的大小相比），因此图像占用了所有可用空间，而flex-grow没有效果（没有可用空间来分配） 。

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

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

或者，更有效地：

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

修正的小提琴

 .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节。 灵活性的组成部分

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

• 了解有关flex-basis: auto和flex-basis: 0之间的区别的更多信息

Answer 2

使用background-image而不是img标签，并使用background-size: 100% 100%; ：

见小提琴

 .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>