Scaling an image into the header - html

Question

I am just starting to learn code and trying to make my first portfolio page project.
Sorry if this is a commonly repeated question. I've tried to search the answer on this one and found some results that have gotten me really close but not quite there and am now wondering if this is possible at all.
I want to use an image as my header but I want to fit the entire image to fit across the page without it cropping like it does when I use the 'cover' option with background-size. I've tried contain as well but that doesn't fill the whole space.
A link to my codepen here: https://codepen.io/Lofu/pen/yXPemm
The html I'm trying to select:
`<div class="page-header"></div>`
My styling:
.page-header {
background-image: url(https://source.unsplash.com/o3TZx8_j7FE);
background-position: 100%;
background-size: cover;
min-height: 50vh;
max-height: 999px;
width: 100%;
}
Is it possible to stretch and fit the entire image across the header that will still keep it looking relatively nice?
Any help is appreciated. Thanks!!

Answer 1

You can also try this:
.page-header
{
background-image: url("enter here your img path");
width: auto;
text-align: center;
margin: 0;
padding: 0;
height: 0;
padding-top: 18.0082%; /* (img-height / img-width * container-width%) */
background-size: contain;
background-repeat: no-repeat;
}
You just need the img-height and img-width normally the container-width in % is 100. Then you use the formal you can see as a comment behind padding-top and replace the 18.0082% with your result.
Let me know if it worked for you.