The box model

The model is made up of four boxes, from inside to outside:

Get image ratio

Ratio = Height / Width

1057 / 2560 = 0.41289 or 41.289%

Scenario #1

Designer wants the masthead to maintain its aspect ratio regardless off screen size.

Option 1: Use padding bottom

div {
  background-size: contain;
  padding-bottom: 41.289%;
}

contain tells the browser to always show the entire image, even if it means there is empty space left in the container.

padding-bottom value gives the container a height corresponding to the image ratio

Option 2: Use viewport units

div {
  background-size: cover;
  height: 41.289vw;
}

cover tells the browser to always cover the entire container, even if the sides have to be cut off.

height value gives the container a height corresponding to the image ratio, because of the relative unit viewport width.

Option 3: Do nothing

img {
  max-width: 100%;
}

If you use a content image, you don't need anything.

Maybe not entirely nothing. max-width: 100% makes sure the image doesn't overflow the container.

May occur if you're working with a CMS.

Scenario #2

Designer wants the masthead to have a minimum height (otherwise the magnificent image's focal point will end up too tiny to make sense).

Option 1: Adjust with background-position

div {
  background-size: cover;
  background-position: 75% 10%;
  min-height: 480px;
}

For background images applied on a container, just use cover.

Control the position of the "crop" based on percentage values along the x-axis and y-axis respectively.

Option 2: Use object-fit

img {
  width: 100%;
  min-height: 480px;
  object-fit: cover;
  object-position: 75% 10%;
}

object-fit: cover behaves similarly to background-size: cover.

object-position behaves similarly to background-position.

Again, may be relevant if you're working with a CMS.

How about text?

If it was up to me...

(╯°□°）╯︵ ┻━┻

Use position: absolute;

This removes the text from the normal document flow, so all the previous examples will work fine.

Just remember to set the position: relative property on the parent container.

Use calc()

If your text is within the normal document flow, it takes up space in the div.

This extra space needs to be offset, using calc() is a good option.

h1 {
  font-size: 5em;
}
.background {
  background-size: cover;
  height: calc(41.289vw - 5em);
}

Need to also account for margins and padding, if any.