Html 如何在具有方向：列的flex容器中垂直放置图像

我试图将一个图像垂直地放入一个具有特定高度的flex容器中

弹性方向

为

列

，图像包含在

弹性项目

中，弹性基础为100%

此外，图像的最大高度

为
100%

正如您在示例中看到的，图像不适合红色容器


#容器{
背景色：红色；
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
高度：200px；
宽度：320px；
证明内容：之间的空间；
}
#容器>*{
填充物：5px；
}
#img{
弹性：01100%；
/*身高：100%*/
}
img{
最大高度：100%；
最大宽度：100%；
}

别的
试试这个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%;
}

你写道：

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

事实上，这是应该做的。规范的主要实现要求在对子级使用百分比高度时，将
height
属性应用于父级。（尽管这是一个缓慢发展的过程。请参阅下面我的第二篇参考。）

参考资料：



（包括替代解决方案）
（W3C）
由于某种原因，我无法让
正常工作（可能是因为它是一个错误）。因此我删除了它，并使用带有图像的
.img
div作为背景

相关变更

.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{
背景色：红色；
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
高度：200px；
宽度：320px；
证明内容：中心；
对齐项目：居中；
}
.容器>*{
填充物：5px；
}
.什么事{
轮廓：1px黄色虚线；
背景：rgba（128,0255,3）；
颜色：白色；
}
.img{
弹性：10自动；
背景：url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png)不重复；
背景尺寸：包含；
背景位置：中心；
宽度：100%；
}

真实尺寸：512 x 512像素
为图像提供最大宽度：100%和高度：auto，我认为这可以it@DanyCode试过了没有效果这个怎么样？我认为这是同样的问题，比如当你试图将一个高度设置为某个父母没有高度的东西的100%时set@Paulie_D我认为它不是，因为我已经用
div
包装了
img
，以防止它成为flex容器的直接子对象。哇，你已经做了很多这方面的研究！