让图像大小相对于同级flex元素[重复]

Question

图片的高度如何与左边元素的高度相关？

我正在尝试创建以下布局：

我尝试了什么

我正在尝试使用 flexbox 来实现这一点。我的 html 看起来像这样。我在容器<div class="split"> 上有display:flex。该容器包含两个子容器：<div class="intro__primary"> 和 <div class="intro__secondary">。第一个有h1、p 和a。第二个img。

我给两个孩子一个 48% 的宽度，我希望我的图片占据尽可能多的垂直空间，但不要超过 <div class="intro__primary"> 的高度。

HTML

<section class="intro">
  <div class="split">
     <div class="intro__primary">
        <h1></h1>
        <p></p>
        <a class="btn"></a>
     </div>
     <div class="intro__secondary">
        <img>
     </div>
</div>

CSS

.split {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.intro__primary {
        width: 48%;
        align-self: flex-start;
}

.intro__secondary {
    width: 48%;
    height: 100%;
    align-self: flex-end;
}

.intro__secondary > img {
    max-width: 100%;
    height: 100%;
}

上面的代码导致图像的高度比左侧文本的容器大得多。我在所有属性上玩了很多，但无法修复它。我忽略了什么？

Answer 1

.split {
  max-height: 100px;
  display: flex;
}
.intro__secondary {
  max-height: 100%;
}
.intro__secondary img {
  height: 100%;
  width: 100%;
  object-fit: cover; /* you can also use object-fit: contain; */
}

<section class="intro">
  <div class="split">
     <div class="intro__primary">
        <h1>Heading</h1>
        <p>paragraph</p>
        <a class="btn"></a>
     </div>
     <div class="intro__secondary">
        <img src="https://source.unsplash.com/random" alt="random-image">
     </div>
  </div>
</section>