html - 基于容器外元素的基础部分高度

Question

我有一个使用 Bootstrap 构建的网站，其中一个部分包含 .img-content-description 中的一些文本。 div，它位于 Bootstrap 内 .container类(class)。在左侧，我有一个图像，它是 .container 之外的外部元素。 ，以便它填满整个屏幕的左半部分。

.image-content {
  position: relative;
  padding-left: 0px;
  padding-right: 0px;
}

.image-content .full-width-img {
  top: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  object-fit: cover;
  height: 100%;
}

.image-content .img-content-description {
  width: 40%;
}

.image-content .container-fluid {
  padding-right: 0px;
  padding-left: 0px;
}

<!-- Bootstrap 4.1.x library -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!-- HTML -->
<section class="col-xs-12 image-content">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <div class="img-content-description smallerpadding">
          <h2>Title</h2>
          <p>Description</p>
          <a>Link</a>
        </div>
      </div>
    </div>
  </div>

  <img src="https://via.placeholder.com/800.jpg" class="img-responsive full-width-img" />
</section>

由于这种结构，节的高度基于包含节右侧所有内容的 div 的高度。但是，我希望图像填充左侧的整个宽度(就像当前一样)，并根据图像高度确定该部分的高度。我知道将使用的所有图像都是 1920*1080 像素，但我不知道如何使用此信息使此部分响应所有屏幕尺寸。在精简版的 HTML 下方:
非常感谢有关如何实现这一目标的任何帮助。

Answer 1

这是你想到的吗？这样，该部分的高度将适应其最高的 child 。

.image-content {
  padding-left: 0px;
  padding-right: 0px;
  overflow: hidden; /* make it cover (height) its content */
  width: 100%; /* set a width so that children can use a percentage of it */
}

.image-content > * {
  float: left;
}

.image-content .full-width-img {
  width: 50%;
/*
  top: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  object-fit: cover;
  height: 100%;
*/
}

.image-content > .container {
  margin-right: 8%; /* center it in its half of the section */
  margin-left: 8%; /* center it in its half of the section */
  width: 34%; /* override the .container's 100% width */
}

.image-content .container-fluid {
  padding-right: 0px;
  padding-left: 0px;
}

<!-- Bootstrap 4.1.x library -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!-- HTML -->
<section class="col-xs-12 image-content">
  <img src="https://via.placeholder.com/800.jpg" class="img-responsive full-width-img" />

  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <div class="img-content-description smallerpadding">
          <h2>Title</h2>
          <p>Description</p>
          <a>Link</a>
        </div>
      </div>
    </div>
  </div>
</section>