.m-hero__picture (Header) dimensions/sizing on different screens

Hey all! I have searched through this forum and Reddit and could use a little bit of help thinking through an issue with my Banner Image. Two images included below show the issue.

UPDATE - hacky solution
Hello anyone who comes across this in the future!

Here are two links to other threads on this topic. [1] [2].

My problem occurred with screens at 2500px. I first added an xxl option to my partials > hero.hbs.

<img src="{{img_url background size="s"}}" srcset="{{img_url background size="s"}} 300w, 
             {{img_url background size="m"}} 600w, 
             {{img_url background size="l"}} 1000w, 
             {{img_url background size="xl"}} 2000w,
             {{img_url background size="xxl"}} 2500w"
     sizes="(max-width: 800px) 400px, 
            (max-width: 1170px) 1170px, 
            (max-width: 2000px) 2000px,
     alt="Description of the image" />

I then added an injection to nudge the image down on xxl screens.

/* Media query for screen width 2500px or larger (XXL size) */
@media screen and (min-width: 2500px) {
    .m-hero__picture img {
        margin-top: 200px; /* Adjust as needed to move the image down */

It isn’t pretty, but it’s sufficient for the moment / Until I can get some better banner images taken. Good luck out there!

On “standard” sized screens/viewports (1600 × 767, and even on phones) my banner image appears as expected; however, on extra large screens (2560 × 1307), the banner gets moved up and results in ‘chopped off heads’. I am using the Liebling theme but I feel that this isn’t a problem relegated to that theme.

Here is an example of a “normal” screen (1600 × 767)

Here is an example of a “large” screen (2560 × 1307)

Related Posts/Info

I’m lost for the best way to resolve this issue and would greatly appreciate any tips or pointers for working around the problem. I believe a solution could involve altering the m-hero__picture; however, I also think the problem could be deeper and that I may be better served to just take new photos and replace the current banner images.

m-hero__picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;