Javascript 当CSS不工作时，如何访问Angular 7（或更高版本）中的HTML元素？

我已经浏览了stackoverflow上所有类似的问题。我是一个棱角分明的新手，但我通常可以将一些东西组合起来，使UX和UI设计能够用于演示目的

目前，我在页面的不同位置有两个基于HTML的组件。其中一个组件是一个版本，页面的一半是照片，另一半是文本。我将尝试证明这一点：

在页面底部附近，有另一个版本的这种布局单元。它有一个全宽的背景，上面有一个图像。平面设计师（在我工作的地方他是个大人物）有一个特殊的图像，其尺寸与上面的图像不相关。看起来是这样的：

屏幕截图很差，但它们下面的HTML是相同的。如果您在一个页面上看到了所有内容（很遗憾，我不允许这样做），您会注意到文本大小和文本布局是相同的。每个布局组件的CTA链接明显不同

问题：因为图像差异太大（我确实提出了抗议，但没有任何效果），我必须使具有全宽背景图像的布局与其他布局的高度完全相同。我尝试过各种CSS方法，但由于维度不同，我需要几十个断点来匹配90%的时间

如果我可以通过Angular使用TypeScript/JavaScript，我可以对窗口大小调整做出反应，并确保背景图像的全宽。是的，我知道：这不是最干净的解决方案，但我必须在明天结束前完成

那么，我如何成功地使用类似于HTMLElement的东西（或者最适合的东西）来获取一个HTML元素的维度，然后调整高度（可能还有其他一些样式属性），以保持它们的同步呢

再一次，我在谷歌上搜索过其他地方。然而，似乎有效的答案超出了我的想象——我正在渗透其他人的component.ts，所以我不想让它成为一个完全不同的版本

---

有什么建议吗？提示？把戏？要签出的链接？

是否尝试使用引导？

您可以尝试创建网格： 第一行分为两列，第二行仅在一个大列中

      <!-- parent component html -->
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <!-- here put the component child1 you want  on the left -->
          </div>
          <div class="col-md-6">
            <!-- here put the component child1 you want  on the right -->
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
              <!-- here put the component child2  -->
          </div>
        </div>
      </div>

---

类似这样的东西

基本上，开发人员没有使用类似引导的任何东西。一切都是“从头开始”或死亡。可以说，我真的很想“实时”调整图像的大小。我对JavaScript相当在行……只是在努力处理Angular和所有你必须知道并包含的东西，以使生命周期仍然有效。顺便说一句：我对文本或图像的左右放置没有问题。实际的问题是，“全宽图像背景”组件的背景图像比所有其他照片都是另一个维度，但它必须始终与其他图像具有相同的高度。正如我所提到的，如果我使用了大约24个断点，我可以很好地处理这些断点……但是如果我可以用Angular/Typescript中的window resize事件调整图像尺寸，那么这似乎是不必要的。我有窗口调整代码的工作。我只是不知道如何访问Angular中的单个HTML元素。