时间戳

首页 > 解决方案 > 基于容器外元素的基础截面高度

html - 基于容器外元素的基础截面高度

问题描述

我有一个使用 Bootstrap 构建的网站，其中一个部分包含一个.img-content-descriptiondiv 中的一些文本，它位于 Bootstrap.container类中。在左侧，我有一个图像，它是 之外的外部元素.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 下方：

非常感谢任何有关如何实现这一目标的帮助。

标签： htmlcssbootstrap-4

解决方案

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

.img-content-description {
  padding: 20px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!-- HTML -->

<div class="row">
  <div class="col-4">
    <div class="img-content-description smallerpadding">
      <h2>Title</h2>
      <p>Description</p>
      <a>Link</a>
    </div>
  </div>
  <div class="col-8">
    <img src="https://via.placeholder.com/800.jpg" class="img-responsive full-width-img" />
  </div>
</div>

推荐阅读