Css 使图像收缩到可用高度而不展开其父图像

我正在尝试创建一个两列部分，其中：

列具有相同的宽度（响应）

块的高度由左列中包含的图像拉伸到其父级的100%后的高度定义

在右栏中有几个元素，其中一个是包含图像的链接

我想从最后一段图像的链接，以缩小它的高度包含原始图像的纵横比，而不拉伸它的容器时，图像有纵向方向

不确定是否可以使用纯CSS。尝试使用flexbox和网格布局，但我肯定错过了一些东西

我准备了一把小提琴：

*{框大小：边框框}
.wrap{最大宽度：80%；边距：0自动；}
.container{display:flex；}
.左，.右{
弹性：0.50%；
边框：1px纯黑；
}
.左{
位置：相对位置；
显示器：flex；
对齐项目：柔性端；
}
.left div.left-text{
位置：绝对位置；
颜色：白色；
填充：1em；
字体大小：200%；
}
.应该设置高度{
宽度：100%；
}
.对{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：之间的空间；
}

这是一个美丽的口号
产品名称
$ 19.99
加入篮子

实现这一点的一种方法是将左侧图像设置为宽度：100%，高度：自动然后使用右容器的背景图像

下面是CodePen的快速演示：

您还可以添加额外的规则，例如，为左列添加

minwidth

，或者将这些列放在一列中，用于移动设备

---

注意：我假设左图像大于200x240px，实现这一点的一种方法是将左图像设置为宽度：100%，高度：自动然后使用右容器的背景图像

下面是CodePen的快速演示：

您还可以添加额外的规则，例如，为左列添加

minwidth

，或者将这些列放在一列中，用于移动设备

---

注意：我假设左边的图像大于200x240px，谢谢您的输入。我没有想到这个主意。如果没有JavaScript，我似乎无法实现响应（为移动/桌面加载不同维度的图像）。但这是一个选择，不客气。可能还有其他使用断点的方法。你能再给我一些要求吗？左边图像的最大尺寸是多少？比例是否总是相同，或者使用不同的图像大小？谢谢您的输入。我没有想到这个主意。如果没有JavaScript，我似乎无法实现响应（为移动/桌面加载不同维度的图像）。但这是一个选择，不客气。可能还有其他使用断点的方法。你能再给我一些要求吗？左边图像的最大尺寸是多少？比例总是相同的，还是会使用不同的图像大小？