headerimage ugly when tablet is in portrait

Hi,

I’ve got exactly the same problem with my mobile native browser (Samsung Edge S7). I found out that changing a couple of CSS parameters makes the header image display correctly. The problem is that I’m no coder, so my solution is just a temporary one and I do hope somebody more expert will fix the issue better.
Basically, this is the code I added in the CSS menu (please change the max-width to fit your tablet):

@media screen and (max-width: 480px) {
.has-header-image .custom-header-media img,
.has-header-video .custom-header-media video,
.has-header-video .custom-header-media iframe {
position: absolute;
height: 100%;
left: 50%;
max-width: 1000%;
min-height: 100%;
min-width: 100%;
min-width: 100vw;
width: auto;
top: 50%;
padding-bottom: 1px;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
object-fit: cover;
}
}

Basically, I’ve changed position in “absolute” and height in “100%”. I’ve also added “object-fit: cover”. I hope it’ll work also for you and somebody more familiar than me with coding could give some additional help.

I’m having the same problem only with my cell phone. On the computer the header image looks okay except I’m having some problems with the top of the image getting cut off. On the phone the image is compressed and distorted horizontally.

Thank you Enrico, I tried it but didnt get to work, I’ve put it in the custom css thing but then the line with “@” is removed. I’ve also put it in section 17.1 (the header section) but no help neither. Maybe I should change the max-width… I’ll deep later more in it.

Hi rcsmit, you can try to retype “@” or copy-paste it in your custom css section (I wouldn’t touch the native css of the theme).
Unfortunately, I’m not so familiar with css coding to be really able to help you. In my site those lines seem to work, but I didn’t test it with a tablet. You would change “480 px” into something bigger: give a try with “768px”. Please let me know if that works also on my site: https://www.griecopelino.com.
We’re experiencing the same issue, that is maintaing image ratio when resizing, so let’s join forces, hoping that somebody from WP will suggest a better fix.