让图像占据改变大小的 div 的全部高度？

Question

我会尽量让这听起来更简单。

我正在尝试并排放置 2 个 div 容器，并让它们始终保持相同的高度。

正确的 div 将是常规文本。由于我计划将其用于不同的页面，因此此处的文本数量会有所不同。

左侧的 div 将由 2 个较小的容器组成 - 一个标题块和一个位于其下方的图像块。

这是我想要实现的视觉示例。绿色框应该是完整的照片

Example Photo

---

我希望左侧图像块中的照片占据框的整个高度/宽度 - （类似于 CSS 中使用的 background-position:cover）。我更喜欢使用常规的 img 标签，而不是将其设置为 div 背景。

---

我遇到的问题是左侧的图像高度优先于右侧的文本框，并导致两个容器看起来比我想要的长得多。我希望右边的文本块优先，图像块根据它改变高度。

我尝试过使用 object-fit: contains，但很遗憾，它不起作用。我得到的最接近的是使用宽度：100%，但它会使高度太大。

这是我目前所拥有的：

.main {
    display: flex;
    }

.main .left {
    width: 40%;
    float: left;
    }

.main .left .title {
    background-color: black;
    text-align: center;
    display: block; 
    height: 90px;
    padding: 50px;
    color: white;
    font-size: 40px;
}
.photo {
    height: auto;
    width: 100%;
    }

.photo img {
    width: 100%;
    }

.main .right {
    width: 60%;
    float: right;
    }

<div class="main">

    <div class="left">
        <div class="title">This is my Title</div>
        <div class="photo"><img src="https://image.shutterstock.com/z/stock-photo-pastoral-green-field-with-long-shadows-in-tuscany-italy-275372477.jpg"></div>
    </div>

    <div class="right">
        <p>text goes here lalalalalala</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

</div>

Answer 1

<style> 
.main {
    display: flex;
    }

.main .left {
    width: 40%;
    display: flex;
    flex-direction: column;
    }

.main .left .title {
    background-color: black;
    text-align: center;
    display: block; 
    height: 90px;
    padding: 50px;
    color: white;
    font-size: 40px;
}
.photo {
    width: 100%;
    overflow: hidden;
    position: relative;
    flex-grow: 1;
    }

.photo img {
    width: 100%;
    position: absolute;
    }

.main .right {
    width: 60%;
    }
</style>

注意事项：

• 我将图像设置为绝对定位，这样它自己的高度就不会拉伸我们的 flex 行。
• 图像正在按高度裁剪。如果标题高于文字（或相同高度），您将根本看不到图片。
• 我使左列也显示 flex 并且照片框 flex 增长，以便标题可以保持相同的高度，并且照片框将拉伸其余部分以匹配右列。
• Flex 项目不需要向左/向右浮动。