CODEWITHSUNDEEP
javascripthtml
Ali Demirci
Ali Demirci

Reputation: 5442

Dynamic image resizing.

I want to change an image size to 200x150 using tag. Can you please help me to do this?

Upvotes: 0

Views: 259

Answers (6)

Guffa
Guffa

Reputation: 700172

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.

Upvotes: 2

Andre Kraemer
Andre Kraemer

Reputation: 2761

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.

Upvotes: 1

John
John

Reputation: 16007

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.

Upvotes: 1

Veger
Veger

Reputation: 37906

You mean like this?

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

Upvotes: 1

sberry
sberry

Reputation: 131978

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

???

Upvotes: 1

SLaks
SLaks

Reputation: 887225

Like this:

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

Upvotes: 1

Related Questions