markx2

Here is the Additional CSS I ended up using, after much trial and error.
It looks great on Android, very good on an iPhone, great on Firefox and Edge on Windows, there are still some sizing issues with Chrome on Windows.
You may have to play with the vw height percentages if your header size is different than mine.

——–
.has-header-image .custom-header-media img,
.custom-header-media iframe,
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
object-fit: initial;
height: auto;
display: block;
min-width: initial;
min-height: initial;
}

.home .custom-header-media {
height: 65vw !important;
}

@media (max-width: 767px)
{
.home .custom-header {
height: 50vw !important;
}

.home .custom-header-media {
height: 45vw !important;
}
}