how do we fix the image sizes for mobile sites?

Question

How do we adjust the same image to iphone Portrait and landscape mode and ipad Portrait and landscape mode?

I have a site which is of 320px width and the header image is also 320px, so when i see this site in landscape mode thn it looks bit smaller and in ipad it is even smaller so how can I fix it fot the same width of the device. I have used media queries to do this and fixed image width based on the device width for ex: for ipad i have written image size as 780px, for mobile landscape 380px.. I s this the right way to do or is there any better way?

Solution

The procedure which you are using is not the perfect way to do.... it is creating some junk css codes. Just use the below code in default section of your stylesheet.. No need to nest it inside media queries of different sizes.

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

You can also go through this link