Html 柔性网格<；img>；和背景图像并排响应/缩放问题

这是我的问题： 我试图创建一个并排的广告，左侧只是一个图像，右侧是一个背景图像，上面嵌套着图像、文本和5个响应flexgrid按钮

我知道了如何在背景图像上分层所有内容，但现在我无法知道如何让背景图像容器与左侧图像一起缩放。我已经调整了几个小时的百分比和利润率，现在试图弄清楚

我设法使它在特定屏幕大小（2560x1440）上非常接近，但随着窗口大小的调整，背景图像容器的大小最终与图像的大小不同。我想到的一个解决方案是创建10个媒体查询断点，在这里我调整边距和填充以使图像大小相同，但老实说，我更愿意找到一种更高效、更干净的方法

请不要评判我的代码，我知道它非常混乱！我还在学习

.flex容器{
显示：-webkit flex；
显示器：flex；
-webkit内容：中心；
证明内容：中心；
最大宽度：100%；
背景图像：url（'https://cdn.shopify.com/s/files/1/1017/0995/files/Luckyleo-Custom-Print-Floral-Background.jpg?13173226259512623367');
背景位置：50；
背景重复：无重复；
背景附件：固定；
填充：50px 0px 50px 0px；
}
.flex-container2{
显示：-webkit flex；
显示器：flex；
-webkit内容：中心；
证明内容：中心；
最大宽度：100%；
边缘底部：-100px；
}
/*新的*/
.flexbottommargin{
边缘底部：-50px；
}
.底部空间较小{
保证金底部：-20px！重要；
}
/*新结束*/
.柔性容器20{
填充顶部：35px；
垫底：35px；
显示：-webkit flex；
显示器：flex；
-webkit内容：中心；
证明内容：中心；
最大宽度：100%；
边缘底部：-75px；
}
.柔性集装箱21{
填充顶部：35px；
垫底：35px；
显示：-webkit flex；
显示器：flex；
-webkit内容：中心；
证明内容：中心；
最大宽度：100%；
边缘底部：-75px；
}
.柔性容器22{
显示：-webkit flex；
显示器：flex；
-webkit内容：中心；
证明内容：中心；
最大宽度：100%；
边缘底部：-100px；
页边顶部：-2px；
}
.柔性容器23{
显示：-webkit flex；
显示器：flex；
-webkit内容：中心；
证明内容：中心；
最大宽度：100%；
边缘底部：-100px；
页边顶部：-2px；
}
.flex-container-content2 img{
垫底：15px；
}
luckyleospacer先生{
垫底：20px；
}
.超底填充{
垫底：12px；
}
.超底填充2{
垫底：20px；
}
/*新的*/
.flex容器内容新年{
填充顶部：20px；
宽度：71%；
/*新线*/
对齐项目：居中；
自对准：居中；
证明内容：中心；
垫底：20px；
文本对齐：居中；
}
.flex容器内容新年横幅{
填充顶部：20px；
宽度：64%；
对齐项目：居中；
自对准：居中；
证明内容：中心；
垫底：20px；
文本对齐：居中；
}
/*新结束*/
.flex容器内容{
填充顶部：35px；
宽度：60%；
对齐项目：居中；
自对准：居中；
证明内容：中心；
垫底：10px；
}
.flex-container-content2{
填充顶部：35px；
宽度：75%；
对齐项目：居中；
自对准：居中；
证明内容：中心；
垫底：35px；
文本对齐：居中；
}
.flex-container-content22{
填充顶部：35px；
宽度：100%；
对齐项目：居中；
自对准：居中；
证明内容：中心；
}
.flex-container-content23{
宽度：100%；
对齐项目：居中；
自对准：居中；
证明内容：中心；
}
.flex-container-content23{
填充顶部：35px；
宽度：100%；
对齐项目：居中；
自对准：居中；
证明内容：中心；
}
.flex-container-content24{
宽度：100%；
对齐项目：居中；
自对准：居中；
证明内容：中心；
填充底部：55px；
文本对齐：居中；
}
.flex容器内容h1{
字体系列：“尽快”，无衬线；
字体大小：2.4vw；
颜色：#292929！重要；
文本转换：无！重要；
字号：600；
线高：1.3em；
字母间距：0px；
填充：4%；
}
.柔性网格单元{
边缘底部：0px；
}
.flex容器内容h2{
字体系列：“Lavanderia”，无衬线字体！重要；
字体大小：4vw；
颜色：#292929！重要；
文本转换：无！重要；
字体大小：400；
线高：1.4em；
边缘底部：35px；
字母间距：0px；
}
.flex-container-content2 h1{
字体系列：“Lavanderia”，serif！重要；
字体大小：50px；
字体大小：3.5vw；
颜色：#292929！重要；
文本转换：无！重要；
字号：500；
线高：1.3em；
字母间距：0px；
}
.flex-container-content2p{
填充顶部：20px；
颜色：#292929！重要；
文本转换：无！重要；
垫底：20px；
}
.柔性容器{
最大宽度：100%；
保证金：自动；
//边框：1px纯红；
}
/*基本flexgrid样式*/
.flexgrid{
显示器：flex；
柔性流：行；
柔性包装：包装；
}
美国文本中心{
文本对齐：居中；
对齐项目：居中；
自对准：居中；
证明内容：中心；
}
.柔性网格单元{
宽度：100%；
弹性：1；
}
.柔性网格单元img{
宽度：100%；
}
/*每行对正*/
.flexgrid——对{
证明内容：柔性端；
}
.flexgrid--中心{
证明内容：中心；
}
/*每行对齐*/
.flexgrid--顶部{
调整项目：灵活启动；
}
.flexgrid--底部{
对齐项目：柔性端；
}
.flexgrid--中心{
对齐项目：居中；
}
/*每单元对齐*/
.flexgrid单元-顶部{
自我校准：灵活启动；
}
.flexgrid单元格-底部{
自对准：柔性端；
}
.flexgrid单元--中心{
自对准：居中；
}
/*===========================================*/
/*所有媒体的基类-移动优先*/
福莱克斯格里先生