Как сделать что бы хеадер занимал высоту в 100vh без учета поля загруженной картинки?

Для того, чтобы хедер занимал высоту в 100vh без учета загруженной картинки, можно использовать CSS свойство background-size. Это свойство позволяет контролировать размер фонового изображения элемента.

Для начала определим CSS-класс для нашего хедера:

.header {
  height: 100vh;
  background-image: url('путь_к_картинке');
  background-repeat: no-repeat;
  background-size: cover;
}

В данном CSS классе мы задаем высоту хедера в 100vh (видимая область экрана), указываем путь к фоновому изображению, указываем, что изображение не должно повторяться (background-repeat: no-repeat) и устанавливаем значение свойства background-size в cover.

background-size: cover приведет к масштабированию изображения так, чтобы его ширина или высота полностью заполнили заданную область (в данном случае хедер), не изменяя при этом пропорций изображения. Это означает, что картинка будет масштабироваться таким образом, чтобы она полностью заполнила хедер, сохраняя при этом пропорциональное отношение.

Таким образом, высота хедера будет равна высоте видимой области экрана, не учитывая высоту загруженной картинки, которая будет отображаться внутри хедера.