The styling in the theme has this CSS:
@media screen and (min-width: 48em){
.twentyseventeen-front-page.has-header-image .custom-header-media, .twentyseventeen-front-page.has-header-video .custom-header-media, .home.blog.has-header-image .custom-header-media, .home.blog.has-header-video .custom-header-media {
height: 1200px;
height: 100vh;
max-height: 100%;
overflow: hidden;
}
}
You can copy that and add it to the Additional CSS tab in the customizer, just with some minor difference:
@media screen and (min-width: 48em) {
.twentyseventeen-front-page.has-header-image .custom-header-media, .twentyseventeen-front-page.has-header-video .custom-header-media, .home.blog.has-header-image .custom-header-media, .home.blog.has-header-video .custom-header-media {
height: 75vh;
max-height: 75%;
}
}
For example, I made the height of the image (or video) to be 75% height of the window. Try it out and see if that helps.