CODEWITHSUNDEEP
imagemobile-website
EmmyS
EmmyS

Reputation: 12138

How do I specify image size so it scales to 100% width on iPhone and android browsers?

I'm developing my first mobile site. The design is pretty simple - almost no graphics. There's a page that allows users to search for retirement communities by zip code. The search results page is just a list of communities found, with links to open an individual community page for each.

All works file, EXCEPT... the client now wants to feature an image of each community on the specific page for that community. The image needs to span the entire width of the screen, regardless of whether the user is viewing in portrait or landscape mode, and it needs to work the same way on both iPhone and android browsers.

How do I specify image size so that it works this way?

Edited to add: I do have a viewport tag already, but although it's correctly setting the size of text and HTML/css elements, it's not having any effect on the images.

Upvotes: 0

Views: 13449

Answers (3)

Danny Scott
Danny Scott

Reputation: 1

Try this; It seems to work for iPhone and Blackberry – not great for android though – by adding a width and height on the body tag to the size of the image. The mobile browsers will then zoom in to the image size.

Upvotes: 0

Sam Stevens
Sam Stevens

Reputation: 43

Try using 

.img {
    max-width: 100%;
}

Upvotes: 2

nLL
nLL

Reputation: 5672

      <img src="source" width="100%" />

or 

     <img src="source" style="width:100%" />

or

 <style>
  .full
  {
  width: 100%;
  }
  </style>
 <img src="source" class="full" />

should do the job;

Upvotes: 3

Related Questions