代码之家 › 专栏 › 技术社区 › Jojo Narte

如何使图像用flex grow填充flex项?

flexbox css3 reactjs css html

Jojo Narte · 技术社区 · 6 年前

我已经阅读了所有现有的解决方案,在这些解决方案中,图像可以填充包含的div,但是我还没有找到一个没有静态维度的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/

2 回复 | 直到 6 年前

Michael Benjamin William Falcon 6 年前

你的代码中有这个:

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

好吧,这就定义了 flex-grow .

但你还没有定义 flex-basis . 因此, 伸缩基准值 保留其默认值,即: auto (i.e., content-defined) 。

这就是你看到的你的布局:一个根据内容调整大小的flex项目。

换言之,由于图像的自然尺寸非常大(与容器的尺寸相比),图像占据了所有的自由空间。 弯曲生长 没有效果(没有可用的空间分配)。

作为解决方案,将此添加到规则中:

.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-shrink 和 伸缩基准值 个别地。

根据flexbox规范:

§ 7.2.1. Components of Flexibility

鼓励作者使用 弯曲 速记而不是直接用它的速记性质,如速记正确地重置任何未指定的组件以适应 common uses .
进一步了解 the difference between flex-basis: auto and flex-basis: 0

××× × ×××× 6 年前

使用 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>