如何强制图像缩小以适应弹性盒？

Question

我已经寻找这个问题的解决方案近两周了，但我仍然完全迷失了。我正在制作一个简单的登陆页面，我不需要任何滚动。我需要一个标题，后跟一个包含段落和图像的引导行。这是我的 MS Paint 示例：

够简单吧？好吧，我一生都无法弄清楚如何让该图像缩小以适应该行。这就是我现在发生的事情。注意：当您在 stackoverflow 上运行代码片段时，窗口很小。使用JSFiddle可以更轻松地查看发生了什么

body, html {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0;
}

.content {
}

img {
  height: 100%;
}

h1 {
  background-color: white;
}

.banner {
  height: 90%;
  background-color: red;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
          
<div class="banner">

  <h1>
    Header
  </h1>

  <div class="row content">
    <p> Hello World </p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png">
  </div>
</div>

结果

让我失望的部分是它.row超出了它的父容器.banner。我们如何强制它留在红色区域内？

我搞乱了对象适应、弹性增长、弹性收缩、弹性基础，但这些似乎都没有创建所需的行为。我要疯狂地试图解决这个问题。也许 flexbox 在这里使用的工具是错误的？但我正在尝试利用引导网格系统的媒体查询。预先感谢您的任何帮助！

注意：我将所有内容都嵌套在 中的原因<div class=".banner">是因为我希望标题在红色背景上有阴影。

编辑 我的问题的根源是如何使图像适合仅覆盖红色区域的行？

Answer 1

您可以像下面这样更新您的代码：

img {
  /* this will make the image stretch and no overflow*/
  height:0;
  min-height:100%;
  /**/
}

h1 {
  background-color: white;
}

.banner {
  height: 90vh;
  background-color: red;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" >
          
<div class="banner d-flex flex-column"> <!-- flex container here -->
  <h1>
    Header
  </h1>
  <div class="d-flex content flex-grow-1 p-2"> <!-- flex-grow here to fill remaining space -->
    <p> Hello World </p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" class="ml-auto">
  </div>
</div>