Question

正如您在上图所示，右侧的图像不会伸展到完整的父高度。为什么这样，如果没有为父母定义特定的高度，我总是确保图像保持在父级的边缘？也就是说，不使用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

也许您想删除图片代码并将图片作为.scheme-img div的背景。您可以设置background-size:cover以使图像覆盖所有边缘。请注意，如果图像不够大，必须放大以适合.scheme-img div，此解决方案可能会导致图像模糊。

顺便说一句，我似乎无法理解为什么你必须将.hero-img和.scheme-img标签添加到div。如果不需要，建议您进行简化。

Answer 2

如何添加以下CSS并删除<img>标记？ -

.hero-img {
  background:url('/assets/img/about-us1.jpg');
  background-size:cover;
}

注意：上面将覆盖整个div，其中hero-img类包含您想要的图像，边缘到边缘。但需要注意的是，你的div的大小可能会根据设备的屏幕大小而改变，并且图像的宽高比可能与你的div不同，因此在拉伸图像的情况下，它会失去其宽高比。

Answer 3

这样可行。

您可以使用JavaScript。这是你的代码。但在此之前，请创建一个img标签的id，并将其值作为img。另外，创建div的id，其大小高度要设置为图像的高度，并将其值设置为y。

<script>
var a = document.getElementById("y");
var b = document.getElementById("img");
var c = a.offsetHeight +"px";
b.style.height = c;
</script>

我要求您为此答案投票或添加评论。

Answer 4

答案是由于对事物的新视角而发现的：而不是看到孩子没有伸向父母。我想为什么父母超越了孩子。感谢精彩的@PeeHaa，我找到了答案。

img标记是inline元素，使display: block;足够，子项将保留在指定的边界（父级）内。

祝大家好运，编码愉快！

图像没有拉伸到完整的父高度？

4 个答案: