The header image that appears via desktop looks good, but the mobile view of the same image looks vertically compressed. So, I tried this without success:
That means you are squashing it in some way. You can’t change an image’s width without maintaining the aspect ratio of the height (or vice versa). As John said above you would usually set your image to max-width:100% (or width:100% depending on use case) and height:auto in order to maintain aspect ratio.
If you are simply scaling width and height then the aspect ratio would be broken (although you could use object-fit:cover to maintain aspect ratio but that will mean the image is cropped to fit the container).
Without seeing a working demo we can only offer basic advice as there may indeed but some other causes affecting the image size (in a flex container perhaps).