Html 如何调整图像大小以适应flexbox，并将所有内容包含在1fr网格中？

我正在尝试创建一个网格，其中包含1fr和FlexBox以及网格。但是

.container

网格减小的大小与我对较小屏幕尺寸（使用mediaquery）的预期不同

flexbox（公文包主卡）用于分别包含图像和文本，图像具有

flex:1

和文本具有

flex:2

。但是图像远远超出了flex:1的范围。flexbox的html部分是：

欢迎来到我的作品集

它的CSS部分是

.portfolio主卡{
显示器：flex；
对齐项目：居中；
证明内容：周围的空间；
边框：2倍纯黄色；
背景色：rgb（134107134）；
宽度：100%；
高度：50vh；
}
.我的形象{
弹性：1；
边框：2倍纯红；
自我辩护：中心；
}
.我的文本{
显示器：flex；
弹性：2；
证明内容：中心；
}

---

整个代码都是

您必须设置标签的样式

使用下面的样式并查看结果：）

.my-image {
    height:100%;
    width:50%;
    display:flex;
}
.my-image img{
    height:100%;
    object-fit:cover;
    width: 100%;
}