Dynamic image resizing.

I want to change an image size to 200x150 using tag. Can you ple开发者_运维百科ase help me to do this?

You just set the width and height attributes:

<img src="..." width="200" height="150" alt="..." />

Note that this only changes how the image is displayed. The file loaded from the server is still the same size so it still takes as long to load. Also, the visual result is varying from browser to browser, some recent browsers are pretty good at resizing images, but generally an image resized this way can look pretty bad.

If you want the best possible quality this method won't do. You have to resize the actual image instead of just specifying how it's displayed.

Like this:

<img width="200" height="150" src="..." alt="My Small Image" />

<img width="200" height="150" src="myimage.jpg" />

???

You mean like this?

<img src="path/to/img" width="200" height="150" />

The other answers are correct. They do what you ask. But:

1. The quality may suffer. Making a pretty thumbnail requires interpolation.
2. If the image is smaller than the size you want, you'll get a grainy image.
3. If the image is larger, you'll still be loading the whole thing (and sucking up your bandwidth). To remedy this you'll need to produce downsampled thumbnails on the fly or statically.

To fix these things you can create your small images offline (if that's appropriate for your application) or venture into imagemagick or something like that to render them more efficiently.

As Guffa said, using the width and height attributes of the image tag just affects the way it is displayed by the browser.

If you want to resize your image, you have either to use server side code for that (like asp.net, php, ...) and serve the resized image, or you have to resize it manualy with a picture editor.