html - 让图像占据改变大小的div的整个高度？

Question

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

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

右侧的 div 将是常规文本。此处的文本量会有所不同，因为我计划将其用于不同的页面。

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

这是我要实现的目标的可视化示例。绿框应该是完整照片

Example Photo

---

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

---

我遇到的问题是左侧的图像高度优先于右侧的文本框，导致两个容器看起来比我想要的长得多。我希望右侧的文本 block 具有优先级，图像 block 会根据此更改高度。

我试过使用 object-fit: contain，但不幸的是它不起作用。我得到的最接近的是使用宽度: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>

注意事项:

• 我让图片绝对定位，这样它自己的高度就不会拉伸(stretch)我们的 flex 行。
• 图像正在按高度裁剪。如果标题比文本高(或相同高度)，您将根本看不到图像。
• 我让左栏也显示 flex 并且照片框 flex 增长以便标题可以保持相同的高度并且照片框将拉伸(stretch)其余部分以匹配右栏。
• 我们不需要为 flex 元素左/右浮动。