My site is experiencing the same thing.
I see that the srcset attribute was automatically generated, and the smaller images were automatically created, when I uploaded the desktop size image.
Perhaps I am missing something!
Did you resolve your problem, mine is still outstanding.
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;
}
}
Thank you @markx2 for sharing your solution.
I’ll go ahead and set this as Resolved for now, @fasterbuilder but feel free to reopen if you have more questions.
