Question

I have an image as a header which when the screen is smaller, for instance when the site is viewed on an iPhone or iPad the image is too big for the screen.

The image covers the navigation and makes the site unusable.

I need to find a way to make the image change size relevant to the size of the screen.

How would I go about doing so?

Answer 1

I’m assuming your container has a fluid width of 100% and can nicely adapt for different screen sizes. In that case you can use

img {
  max-width: 100%;
}

and the image will never exceed its’ parent container width.
Or some of the more sophisticated solutions from responsive design field:

• Adaptive Images
• Picturefill