Resizing the image based on screen resoultion

Question

我有一个图像...并且如果图像的高度大于maxHeight或宽度大于maxWidth，我想按比例调整图像大小，使其适合maxWidth X maxHeight。

Answer 1

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.

Answer 2

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

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