4

I am using this code to auto resize images to the window size on a mobile page:

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

My intention is to show the image in the right size of the window on small screens and max 480px on bigger screens maintaining the ratio.

But for some reason i dont know when i use that code the text around the image goes behind it.

Theres a way to achieve this result using another method like Java or Jquery and avoid this problem?

Evel
  • 67
  • 2
  • 6
  • 2
    Is the text in the same div as your image? If so move it out into a separate div. Also make sure your image div is not absolutely positioned or suchlike unless you account for its changing size. – locka Jan 19 '11 at 14:09
  • 1
    can you create a live example at jsbin.com? – Sotiris Jan 19 '11 at 14:11
  • Cant, its inside an android app that gets data from my rss feed. Can i make an javascript that put all images inside div tags to make the separation? like
    ?     – Evel Jan 19 '11 at 15:38

5 Answers5

2

If you do this for mobile devices I would recomend server resize to save download size.

Regarding the text that goes behind, do you have a more comprehensive testcase showing the actual document this CSS applies to?

David Mårtensson
  • 7,550
  • 4
  • 31
  • 47
2

You'll end up with squished images if you do that. I think this gives the best result you can achieve with CSS:

#content img {
    width: 100%;
    height: auto;
    max-width: 480px;
}
Philip Orange
  • 21
  • 1
1

I added this code in my page and it's working:

img {
  width:100%;
  max-height : auto;
  max-width : 480px;
}
Mr.Wizard
  • 24,179
  • 5
  • 44
  • 125
prasanthspushpa
  • 11
  • 1
1

Have you tried using different style sheets for different screen sizes? Then you would just need to write the code for each situation and then load the needed style. It would also come in handy if you have other styles that need to change based on size. Very helpful on mobile sites. 

<meta content="width=device-width, initial-scale=1.0" name="viewport">

helps to make sure it scales right. Not sure how helpful it will be, but hope this link helps.

CSS trick for specific style sheet

I've also played around a little, and it seems to work if you set the image as a percentage. I floated one to the left of text and at 50% of the screen and it re-sized text and all. If you need me to post an example, just ask.

CDStMichael
  • 11
  • 4
0

use @media to do manual change by the mobile, tablet or desktop size. by the way mobile and tablet will have landscape and portrait. if you using google chrome to check you can determine it better. sample of website : Media Queries: How to target desktop, tablet and mobile?

Community
  • 1
  • 1
ChengWan
  • 31
  • 11