Михаил Румянцев

<div class="wrapper">
    <img class="image" src="" alt="">
</div>

.wrapper {
    position: relative;
    display: block;
}

.wrapper::before {
    content: '';
    display: block;
    padding-top: 50%; // вычисляется относительно ширины родителя
}

.image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<article>
  <header>
    <h1>Header</h1>
    <hr />
  </header>
  <section>
    Content
  </section>
</article>

header {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

hr {
  flex-grow: 1;
}

.nav-container {
    display: flex;
    justify-content: space-between;
}