Resizing the image based on screen resoultion

I've got a image... and if the image's height is greater than maxHeight, or the width is greater than maxWidth, I'd like to proportionally开发者_JAVA百科 resize the image so that it fits in maxWidth X maxHeight.

While this can be done, what happens when the user's screen is much bigger than the native size of the image? Do you stretch it to the point of it degrading into pixels?

What happens with people with smaller screens - do they have to waste time and bandwidth downloading an image that is much larger than they're capable if displaying, then depending on the browser to scale the image down?

In many browsers, especially older ones, scaling images degrades them, whether making them bigger or smaller. It's best to scale them on the server, based on a large image and deliver the "right" sized image to the client. This is much more complicated.

While all of this is possible, one must ask whether this really adds much value to the user experience in the first place and whether all this effort is worth it.

You can set the attributes of the image tag using JavaScript.

The properties you may like to set are height, width.