What you are seeing is exactly what CSS “cover” scaling does for background images.
In order to cover an area without altering the aspect ratio of the image and distorting it, the image has to be scaled to whichever axis (either width or height) is the greater. Obviously this will mean that the image is larger in the other direction too and will not all fit into view. You then have options for how the alignment will be handled - i.e., which edges are fixed to the origin of the image horizontally and vertically.
center center positioning wil center the image in both directions. Similarly
left top will ensure that the left hand side and the top are always in view, with any overflow occurring at the right and bottom - dependent on the aspect ratio.
If you want to completely cover and fir, for example, a landscape image into a portrait sized box, this is inevitable. Other background scaling options allow you to either fill the space or
contain to the width (which is more like what you think of as responsive scaling with respect to foreground images - but remember at some screen sizes you may well get an area of the background that is not covered by the image).
One solution for the vast difference in aspect ratio between a landscape desktop and a portrait mobile is to define a separate image for small (narrow) screens. You can thus use a portrait crop of your image below a certain breakpoint and a landscape one above it. Even with cover scaling you will get a much larger proportion of your image in view this way - Sections allows you to specify two images for this very reason. There is also the option to revert to a colour for the background on small screens which many people prefer in preference to a poorly cropped image.