html - 如何在方向为 : column 的 flex 容器中垂直放置图像

Question

我正在尝试将图像垂直放置在具有特定高度的 flex 容器中。

flex-direction是column，图像包含在flex-item中，flex-basis: 100 %.

另外，图片的max-height是100%。

如您在示例中所见，图像不适合红色容器。

#container {
    background-color: red;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 200px;
    width: 320px;
    justify-content: space-between;
}

#container > * {
  padding: 5px;
}

#img {
  flex: 0 1 100%;
  /* height: 100%; */
}
img {
  max-height: 100%;
  max-width: 100%;
}

<div id="container">
    <div id="img">
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=img&w=340&h=500">
    </div>
    <div>
      Something else
    </div>
</div>

根据规范，图像不应该收缩以垂直放入 flex 容器吗？

我找到的解决方法是将 #img 的 height 设置为 100%，但我感觉这不是办法应该这样做。

作为附加说明，如果我将 flex-direction: row 设置为容器，它会水平适合图像(这是我期望的行为)。

Answer 1

你写道:

The workaround I found is to set the height of #img to 100%, but I have the sensation that it's not the way it should be done.

实际上，它是它应该做的方式。规范的主要实现要求在子级上使用百分比高度时将 height 属性应用于父级。 (虽然这正在慢慢发展。请参阅下面我的第二个引用资料。)

引用资料:

• Working with the CSS height property and percentage values
• Heights rendering differently in Chrome and Firefox (包括替代解决方案)
• CSS height property definition (W3C)