对于标题横幅，此代码是否可以有效替代“顶部填充”？

Question

我希望有人能给我答案。这显然是一种流行的CSS方法的替代方法。

我想众所周知，您可以将padding-top与背景一起使用，例如标题横幅，以便将多个元素放置在标题横幅的前景中，例如：

.header-banner {
  background: url(../img/background-banner.jpg) no-repeat center;
  background-size: contain;
  padding-top: 20.83%;
  height: 0;
  width: 100%;
}

现在，除了背景横幅之外，还很容易用其他元素填充标题横幅，而没有更大的问题-与难以与其他元素一起放置在标题横幅中的简单元素形成鲜明对比。 缺点是：如果图像尺寸发生变化，例如，您需要重新计算填充顶部，从250x1200（padding-top：20.83％;）到300x1100（padding-top：27.27％;）。

似乎顶部填充是一种非常流行的解决方案。我的问题： 为什么不使用以下代码？

HTML:
    <header class="headerBanner">
      <img src="src/img/background.jpg" alt="banner">
      <p>Content in the foreground of banner</p>
    </header>

CSS:
    .headerBanner {
        position: relative;
    }

    .headerBanner > img {
        display: block;
        width: 100%;
    }

    .headerBanner > p {
        position: absolute;
    }

通过这种方式，我们不必担心图像大小，也不需要计算“ padding-top”。第二种解决方案没有我看不到的缺点吗？还是这两种可用于相同结果的简单方法？在这种情况下，为什么还要使用padding-top，因为如果图像尺寸发生变化，它需要更多的计算？

---

我希望我提出的问题足够清楚。请告诉我是否需要更改/添加一些内容，以使其更易于理解。