CODEWITHSUNDEEP
cssimagehtmlmobile
Sowmya
Sowmya

Reputation: 26969

how do we fix the image sizes for mobile sites?

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?

Upvotes: 3

Views: 10554

Answers (2)

Holger D. Schauf
Holger D. Schauf

Reputation: 147

detect your device with your framework or php (strstr inside User Agent) and set and device specific stylesheet for your site. This solution is good to load only the used css files.

The best Way to optimize your site for all solutions and devices is to use the responsive webdesign. This is an methodic to design an layout, that is relative to resolution.

Here is an list for some examples:

http://designmodo.com/responsive-design-examples/

Upvotes: 0

Subhajit
Subhajit

Reputation: 1987

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

Upvotes: 3

Related Questions