适合对象的图像匹配文本高度

如何解决适合对象的图像匹配文本高度

我搜索了许多类似的问题，但似乎没有一个完全涵盖我正在寻找的内容。

基本上我希望用 flexBox 制作等宽和高度的列，一个带有实际的图像标签，一个仅带有文本。图片必须是使用 object-fit:cover 的图片标签，而不是使用背景图片。

我已经非常接近了，但是当容器太宽时，文本列的高度与图像的高度相匹配，而不是相反，在文本下方留下一个很大的难看空间，我真的很想删除它。

下面的链接图片显示了我希望删除的部分列。

我已经创建了一个代码笔，到目前为止我已经取得了：

https://codepen.io/ash-media/pen/Vwmoebj

Codepen 中的 HTML 代码如下：

<section class="block-image-text">
  <div class="col col-image">
    <img src="https://images.unsplash.com/photo-1485199433301-8b7102e86995?ixid=MXwxMjA3fdb8MHxwaG90by1wYWdlfHx8fGVufdb8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1980&q=80" />
  </div>
  <div class="col col-text">
    <h2>Something Awesome</h2>
    <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Vestibulum laoreet dui nisl,vel convallis lectus tempus et. Duis malesuada ligula dolor. In hac habitasse platea dictumst. Cras non lacinia odio. Maecenas aliquam porta turpis. Suspendisse dignissim viverra leo,nec commodo nibh iaculis a. Phasellus nec turpis sit amet erat porttitor elementum id et metus. Morbi mattis sit amet tortor ut dignissim. Integer pulvinar libero diam,ut volutpat nunc bibendum in. Sed ac felis gravida,egestas elit id,scelerisque turpis. Cras scelerisque eu urna quis malesuada. Etiam viverra nulla neque,vitae pretium tortor lobortis eu.</p>
    <p>Vivamus eget urna sed ex tincidunt ultricies sit amet id urna. Proin et massa ornare,interdum ipsum eget,dignissim nisl. Maecenas libero orci,aliquam a hendrerit sit amet,laoreet quis ante. Pellentesque ultricies leo in mattis accumsan. Morbi sagittis mattis sapien placerat dapibus. Pellentesque nisi elit,hendrerit vitae mattis vestibulum,laoreet sed nunc. Praesent quis aliquam libero,imperdiet accumsan risus. Aliquam erat volutpat. Fusce ornare odio nunc,a volutpat tellus molestie venenatis.</p>
  </div>
</section>

CSS 如下：

.block-image-text {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.block-image-text .col {
  flex: 1;
}
.block-image-text .col:nth-child(1) {
  order: 0;
}
.block-image-text .col:nth-child(2) {
  order: 1;
}
.block-image-text .col-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.block-image-text .col-text {
  padding: 0 20px;
  background: #CCC;
}

@media screen and (min-width: 768px) {
  .block-image-text {
    flex-direction: row;
  }
}

虽然不是问题的一部分，它会在更窄的宽度上切换到垂直布局，所以请忽略这一点。这是我在 StackOverflow 上的第一个问题，所以如果我做错了什么，请放轻松。

提前致谢！

This image shows the part of both columns that shouldn't be present