html - 图片没有拉伸(stretch)到完整的父级高度？

Question

如您在上图中所见，右侧的图像不知何故没有拉伸(stretch)到完整的父级高度。为什么会这样，我怎么能在不为父级定义特定高度的情况下始终确保图像保持在父级的边缘？也就是说，不使用 background-size: cover; 或任何与删除 img 标签有关的 CSS。

我试过使用这个线程:click here

然而，我转身不成功。

HTML

<div class="scheme center-center">
    <div class="superintendent center-center">
      <div class="details">
        <div class="hero hero-initial">
          <div class="container">
            <div class="wrapper text-center">
              <div class="hero-header">
                <h1>Welcome back!</h1>
              </div>
            </div>
          </div>
        </div>
        <form class="form" action="#" method="post">
          <div class="container">
            <label for="author-name">Author's Name</label>
            <input type="text" placeholder="John Doe"name="author-name" required>
            <label for="password">Password</label>
            <input type="password" placeholder="Password" name="author-name" required>
            <input type="submit" class="submission" value="Continue from where you left off">
          </div>
        </form>
      </div>
      <div class="graphics">
        <div class="hero-img scheme-img">
          <img src="/assets/img/about-us1.jpg" width="100%">
        </div>
      </div>
    </div>
  </div>

CSS

.scheme {
  height: 940px;
  width: 100%;
  background-color: #f2f2f2;
}
.superintendent {
  width: 900px;
  height: auto;
  border-radius: 5px;
  background-color: #fff;
  -webkit-box-shadow: 3px 6px 30px -2px rgba(0,0,0,0.51);
  -moz-box-shadow: 3px 6px 30px -2px rgba(0,0,0,0.51);
  box-shadow: 3px 6px 30px -2px rgba(0,0,0,0.51);
}
.details {
  float: left;
  width: 60%;
  height: inherit;
}
.graphics {
  float: right;
  width: 40%;
  height: auto; /* Same height as the image currently in use */
}
.scheme-img {
  width: auto;
  height: auto;
}
.hero-initial {
  height: auto;
  padding: 30px 0 0;
}
.hero-initial h1 {
  font-size: 2.4em;
  font-weight: 500;
}
.form {
  max-width: 400px;
  height: inherit;
  margin: auto;
  padding: 0 0 30px 0;
}
label {
  padding: 15px 0;
  display: inline-block;
  font-weight: 600;
  letter-spacing: 0.4px;
  font-weight: 400;
}
input[type=text], input[type=password] {
  width: 100%;
  padding: 15px 10px;
  display: inline-block;
  font-size: 1em;
  border-radius: 5px;
  background-color: #f2f2f2;
  border: 1px solid #f2f2f2;
  outline: none;
}
input[type=submit] {
  width: 100%;
  display: inline-block;
  text-align: center;
  padding: 15px 10px;
  font-size: 1em;
  cursor: pointer;
  margin: 35px 0;
  transition: 0.2s ease-in-out;
}

我很乐意帮助任何人进一步澄清这个问题!

Answer 1

由于对事物有了新的认识，找到了答案:而不是看到 child 没有向 parent 伸出援手。我想为什么 parent 超越了 child 。感谢出色的@PeeHaa，我能够找到答案。

img 标签是一个 inline 元素，使其成为 display: block; 就足够了， child 将停留在指定的范围内( parent )。

祝大家好运，编码愉快!