Best way to automatically resize an image?

Question

I use this code to automatically resize images to window size on a mobile page:

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

I intend to show the image in the desired window size on small screens and a maximum of 480 pixels on large screens, maintaining the ratio.

But for some reason, I don’t know when I use this code, the text around the image is behind.

Is there 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, I would recommend resizing the server to keep the download size.

As for the text that goes behind, do you have a more detailed test file showing the actual document that this CSS applies to?

Answer 2

If you do this, you will get squeaky images. 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 to my page and it works:

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

Answer 4

Have you tried using different stylesheets for different screen sizes? Then you just need to write code for each situation, and then load the style you want. This is also useful if you have other styles that need to be changed depending on the size. Very useful on mobile sites.

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

helps make sure that it scales correctly. Not sure how useful this is, but hope this link helps.

CSS trick for a specific style sheet

I also played a little, and it seems to work if you set the image as a percentage. I placed one to the left of the text and at 50% of the screen, and it resized the text and that's it. If you need me to post an example, just ask.

Answer 5

use @media to manually resize your mobile phone, tablet or desktop. By the way, mobile and tablets will have a landscape and a portrait. if you use Google Chrome for verification, you can identify it better. Sample website: Media queries: How do I target desktops, tablets, and mobile devices?