Wordpress - how to resize header image for mobile

Question

preamble:

I am using a somewhat responsive theme (skeleton). it changes the layout to a single column for small screen sizes,

my problem is:

my header image (that i inserted using the theme options in the admin panel) is not scaling when the screen is resized. it remains at 940x150 all the time. when viewed on mobile this is causing a full sized header with content in a single column on the left, so im left with all kinds of whitespace.

I would like to: cause the image to scale down with the screen width

OR

replace the header image with one meant to fit smaller screen sizes.

the problem with option 2 is not all devices have the same screen width so it still needs to be scaleable to a point.

Ideally:

when above the below stated width, the image will scale to fit the screen between the 700-something (ipad landscape) and the 940 standard.

when below a certain screen width (say below tablet/ipad size, so 700-something max-width), the image is swapped for the smaller one, which then scales up or down between 300 and 700-something (just below the ipad size).

in this way the image would always be a decent size for the rendering of the site.

the problem with this particular image is the amount of whitespace (empty space) in the middle. below a certain width, i would think the elements of the image would become artifacted and messy with so much space between them.

the site:

porthuronairportshuttle.com

Answer 1

Add this to your css:

img {
height: auto;
max-width: 100%;
}

Answer 2

I figured it out. It was actually a matter of removing the header I uploaded with theme options and uploading it with wp core functions. Then I moved the nav bar in the header.php and after some tweaks with margins and padding - poof!