更好的方法来自动调整图像的纵横比？

Question

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?

Answer 1

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?

Answer 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;
}

Answer 3

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

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

Answer 4

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.

Answer 5

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?