Html 如何平均设置弹性项目高度

我有一个flexbox容器和两个flexbox项目：

项目img

和

项目内容

<代码>项目img中有图像。我希望

项目img

的高度等于

项目内容的高度

，图像将覆盖其所有空间

这意味着根据

项目内容
的高度设置
项目img的高度。
项目内容
的高度不是固定的，可能比图像的高度大或小得多

任何帮助都将不胜感激。非常感谢


.flex容器{
显示器：flex；
宽度：500px；
边框：实心1px#123；
}
.弹性项目{
最大宽度：50%；
溢出：隐藏；
弹性基准：50%；
}
.项目img{
显示器：flex；
}
img{
对象匹配：覆盖；
}

这与文本有关

更多文本

更多文本

更多文本

更多文本

更多文本

将
高度：100%
和
最大宽度：100%
设置为
img
，并将图像绝对放置在
项目img
内（以便容器始终采用
项目内容的高度）
-请参见下面的演示：


.flex容器{
显示器：flex；
宽度：500px；
边框：实心1px#123；
}
.弹性项目{
最大宽度：50%；
溢出：隐藏；
弹性基准：50%；
}
.项目img{
显示器：flex；
位置：相对位置；
}
img{
/*对象匹配：覆盖*/
身高：100%；
最大宽度：100%；
位置：绝对位置；
排名：0；
左：0；
}

这是文本内容

更多文本

更多文本

更多文本

更多文本

更多文本




这是文本内容

更多文本

更多文本

更多文本

更多文本

更多文本

将
高度：100%
和
最大宽度：100%
设置为
img
，并将图像绝对放置在
项目img
内（以便容器始终采用
项目内容的高度）
-请参见下面的演示：


.flex容器{
显示器：flex；
宽度：500px；
边框：实心1px#123；
}
.弹性项目{
最大宽度：50%；
溢出：隐藏；
弹性基准：50%；
}
.项目img{
显示器：flex；
位置：相对位置；
}
img{
/*对象匹配：覆盖*/
身高：100%；
最大宽度：100%；
位置：绝对位置；
排名：0；
左：0；
}

这是文本内容

更多文本

更多文本

更多文本

更多文本

更多文本




这是文本内容

更多文本

更多文本

更多文本

更多文本

更多文本

不理解您的问题。两个部分现在的高度相同。@SauravRastogi我更新了我的问题。更清楚吗？我不明白你的问题。两个部分现在的高度相同。@SauravRastogi我更新了我的问题。是不是更清楚了？对不起，这不是它想要的。如果将图像大小更改为350*350，则
项目img
将大于
项目内容
。我希望他们总是平等的。@duanx使用一些定位-见更新的答案，谢谢！美好的这似乎更接近我想要实现的目标。但是图像没有覆盖
项目img
的所有空间。我认为我们应该在
项目img
中添加一个div，并覆盖图像。设置div的全尺寸、
位置：绝对
和
显示：flex
。现在
object-fit:cover
可以使用了。你能把你的答案编辑成那样吗。我会接受的。@duanx更新答案，谢谢！：）对不起，这不是它想要的。如果将图像大小更改为350*350，则
项目img
将大于
项目内容
。我希望他们总是平等的。@duanx使用一些定位-见更新的答案，谢谢！美好的这似乎更接近我想要实现的目标。但是图像没有覆盖
项目img
的所有空间。我认为我们应该在
项目img
中添加一个div，并覆盖图像。设置div的全尺寸、
位置：绝对
和
显示：flex
。现在
object-fit:cover
可以使用了。你能把你的答案编辑成那样吗。我会接受的。@duanx更新答案，谢谢！：）