catcode.com > Guide to Images > Scaling an Image

Scaling an Image

You are probably wondering what happens if you specify a width or height that doesn't match the exact dimensions of the image. Here are some examples of what happens to Tabitha's picture (true dimensions: 140 by 144) with several different height/width specifications. To save space, we've left off the alt and title attributes in the table below.

black domestic shorthair

<img src="tabitha.jpg" width="140" height="144" />

Actual size -- the best use of width= and height=.

black domestic shorthair

<img src="tabitha.jpg width="280" height="288" />

If you make a picture bigger, it will appear grainier.

black domestic shorthair

<img src="tabitha.jpg" width="70" />

Note: if you specify only one of width or height, the other dimension will be adjusted to keep the original image's proportions.
black domestic shorthair

<img src="tabitha.jpg" width="140" height="72" />

Of course, there's no law that says you have to keep width and height proportional if you want a “fun-house mirror” effect.

HOWEVER: Scaling is not a bed of roses. It has its dangers, as you will see on the next page, which will take a long time to load!

<< Specifying Width and Height
^ Index