Flexbox 内的图像高度在 Chrome 中不起作用

Question

我有一个

div

使用 flexbox 将其项目居中。在这个

div

里面我有3个元素，其中一个是图像。

<div id="flex-container">
    <div id="container1"></div>
    <img src="#" alt="">
    <div id="container2"></div>
</div>

#container1

和

#container2

有自己的高度，

img

应该使用

#flex-container

内部的剩余高度。

此代码片段适用于 Firefox，但不适用于 Chrome。 (jsfiddle)

#flex-container{
  height: 300px;
  width: 500px;
  display: flex;
  display: -webkit-flex;
  flex-flow: column nowrap;
  -webkit-flex-flow: column nowrap;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  border: 5px solid black;
}

#container1, #container2{
  height: 100px;
  width: 300px;
  background: orange;
  flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
}

<div id="flex-container">

  <div id="container1">300x100 px</div>

  <img src="http://i.imgur.com/RRUe0Mo.png" alt="">

  <div id="container2">300x100 px</div>

</div>

Chrome 需要为 Flexbox 添加

-webkit-

前缀，但问题似乎不是这个。

会发生什么？是浏览器错误还是我忘记了什么？

Answer 1

您需要克服两个问题：

Firefox 自己解决了这两个问题，但 Chrome 需要帮助。

问题#1

第一个问题是弹性项目默认不能小于其内容。弹性项目的初始设置是

min-height: auto

。

因此，具有替换元素的 Flex 项目（例如图像）将默认为图像的固有大小。该项目无法变小，除非您覆盖初始设置（使用

min-height: 0

）。

#flex-container {
  height: 300px;
  width: 500px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  border: 5px solid black;
}
#container1, #container2 {
  height: 100px;
  width: 300px;
  background: orange;
  flex: 1 0 auto;
}
img { min-height: 0; } /* NEW */

<div id="flex-container">

  <div id="container1">300x100 px</div>

  <img src="http://i.imgur.com/RRUe0Mo.png" alt="">

  <div id="container2">300x100 px</div>

</div>

可以在这里找到此问题的完整解释：

• 为什么弹性项目不会缩小到超过内容大小？

---

问题#2

然后你遇到了第二个问题：保持纵横比。这是柔性容器中的常见问题。一种选择是定义图像的高度：

#flex-container {
  height: 300px;
  width: 500px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  border: 5px solid black;
}
#container1, #container2 {
  height: 100px;
  width: 300px;
  background: orange;
  flex: 1 0 auto;
}
img { min-height: 0; height: 100px; } /* NEW */

<div id="flex-container">

  <div id="container1">300x100 px</div>

  <img src="http://i.imgur.com/RRUe0Mo.png" alt="">

  <div id="container2">300x100 px</div>

</div>

Answer 2

感谢评论中的@alexandr，这对我来说是完美的解决方案：

object-fit: contain; // done on the image resizes the height

我只是把它放在这里，因为这是一个正确的答案，可能会作为评论而被错过。