重叠元素与自动高度图像

Question

我想知道重叠设计如何在wework.com网站上工作。我知道它是通过绝对位置和相对位置等方式实现的，显然我可以通过检查器提取源，但是有很多失真的类，这使得很难概述所有内容。我也正在与引导程序一起工作，并希望实现类似的目标。我设法重新创建了设计，但媒体查询遇到了麻烦：

我的设计看起来像这样：

如您所见，除了白色文本区域下的空格外，其他内容非常相似。同样在调整大小时，wework图片的高度正在减小，因此看起来就像是两个没有重叠的col布局。在我的设计中，整个过程都是这样的：

我正在使用Bootstrap 4来实现这一目标。我如何实现将图像“包装”在其余内容上而又没有实际包装？

我的html：

<div class="hero  space-bottom-2">
  <div class="container">
    <div class="row position-relative">

      <div class="col-12 col-md-6 col-lg-4 position-absolute left-0 z-index-999 space-1">
        <div class="space-1 bg-white border-radius pr-md-7">
          <h1 class="h2">Lorem ipsum dolor sit amet consecteteur instagram yolo paleo.</h1>
          <p class="sub-p mb-5">Lorem ipsum dolor sit amet consecteteur instagram yolo paleo. Lorem ipsum dolor sit amet
            consecteteur instagram yolo paleo.</p>

          <!-- Form Group -->
          <!-- I removed the form, because it is not necessary for this example and takes many lines of code -->
          <!-- End Form Group -->
        </div>
      </div>

      <div class="col-12 col-md-6 col-lg-10 position-relative offset-lg-2">
        <%= image_tag("content/hero/hero-image2.jpg", class:"img-fluid border-radius  bottom-0 left-0 right-0 top-0") %>
      </div>

    </div>
  </div>
</div>

我希望我可以不提供任何CSS，因为我必须搜索所有类，并且名称几乎表明了它的含义。 space-*类在顶部和底部进行填充。 pr和mb也用于填充和边距。你有什么建议吗？预先谢谢你！