Solution you can do, with some changes,

in the #banner element

#banner {
    width: auto;
    height: 100vh;
    /* rest same */ 
}

and in #banner img && img element

#banner img,
 img {
    /* width: remove it [from media queries also] */
    /*height: remove it [from media queries also] */
    object-fit: fill; 
    /* rest same */
}

Some considerations, resizing is not a good idea, you be using object-fit: cover. But, if you are upto something else this will resize to the viewers screen, and for mobile you can further modify #banner element by using 'dvh', due to browser header issue in mobiles.

#banner {
    width: auto;
    height: 100dvh;
    /* rest same */ 
}