Question

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

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>

根据规范，图像是否应缩小以垂直放入柔性容器？

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

另外请注意，如果我将flex-direction: row设置为容器，它会水平放置图像（这是我期望的行为）。

Answer 1

您写道：

我找到的解决方法是将#img的高度设置为100％，但我感觉它不是应该这样做的。

实际上，它是应该完成的方式。规范的主要实现要求在对子项使用百分比高度时将height属性应用于父项。（虽然这种情况正在慢慢发展。请参阅下面的第二篇参考资料。）

参考文献：

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

Answer 2

出于某种原因，我无法让let foo = ({ a: "A" } as any) as { a?: string, b: string };表现出来（可能是因为它是replaced element）。所以我删除了它，并使用<img> div和图像作为背景。

相关变更

.img

<强>段

.container {
...
  justify-content: center;
  align-items: center;
}

.img {
  flex: 1 0 auto;
  background: url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) no-repeat;
  background-size: contain;
  background-position: center;
  width: 100%;
}

.container {
  background-color: red;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 200px;
  width: 320px;
  justify-content: center;
  align-items: center;
}
.container > * {
  padding: 5px;
}
.somethingElse {
  outline: 1px dashed yellow;
  background: rgba(128,0,255,.3);
  color: white;
}
.img {
  flex: 1 0 auto;
  background: url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) no-repeat;
  background-size: contain;
  background-position: center;
  width: 100%;
}

Answer 3

试试这个css。它的工作正常。

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

#img {
  height: 85%;
  width: 100%;
}

如何使用方向：

3 个答案: