Fit image into available height remaining

Question

I have the task to develop a website according to images. I have this photo:

This section is obviously divided into two parts: the picture and then the text underneath. However, the height of the entire section must be 100vh. As you can see, the text has certain spacings in between elements. How can I make the image fit inside the available remaining height?

Here is the code

* {
  margin: 0;
  padding: 0;
}

html {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  color: #333333;
}

.hero {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.hero img {
  /* width: 100%; */
}

.hero>div {
  flex-grow: 1;
  max-width: 1280px;
  padding: 0 24px;
}

.hero h1 {
  font-size: 32px;
  line-height: 1.25em;
  font-weight: 800;
  margin-bottom: 24px;
}

.hero p {
  max-width: 1024px;
  font-size: 16px;
  line-height: 1.5em;
  margin-bottom: 32px;
}

a[href="#facts"] {
  margin: 0 auto;
  display: inline-block;
  margin-bottom: 16px;
}

<section id="hero" class="hero">
  <img src="assets/hero.jpg" alt="2018" width="1980" />
  <div>
    <div>
      <h1>People of the Year</h1>
      <p>
        Some people do more for humanity. Us, the People of the Year foundation, have hand-picked the ones we think have done one small step for themselves and a giant leap for us all and are providing them with the platform they deserve to be seen on.
      </p>

      <a href="#facts">
        <span>More</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
                        </svg>
      </a>
    </div>
  </div>
</section>

Sadly, the image in the code cannot load. However, I think you get the idea. If you have any questions, please don't hesitate to ask.

Answer 1

Wrap the image with another div. Also, add a class to the div containing the text and do not use .hero > div selector in your css anymore, since now there are two divs with different purpose.

  <div class="hero-image-wrapper"> <!-- Wrap the image -->
    <img src="assets/hero.jpg" alt="2018" />
  </div>
  <div class="hero-text"> <!-- Add a class hero-text -->
    <div>
      <h1>People of the Year</h1>
      <p>
        Some people do more for humanity. Us, the People of the Year foundation, have hand-picked the ones we think have done one small step for themselves and a giant leap for us all and are providing them with the platform they deserve to be seen on.
      </p>

      <a href="#facts">
        <span>More</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
                        </svg>
      </a>
    </div>
  </div>

Now, give the image wrapper a relative position and set the flex to 1. That way, the div will take the remaining space of the section.

For the image, set the position to absolute and max-height to 100%.

Also, don't forget to change the .hero div selector to .hero-text.

.image-wrapper {
  flex:1;
  position:relative;
}

.image-wrapper img {
  position:absolute;
  max-height:100%;
}

// Your code, changed the selector
.hero-text {
  max-width: 1280px;
  padding: 0 24px;
}