The Dark Furie

First, start with your basic image. For this example we'll use my favourite thing in the whole world...Fresh steak, ready to cook.

The address of this image is http://files.myopera.com/Furie/files/steak1.JPG and the dimensions of the image are 1600 width and 1200 height, though my page automatically cuts it down to a decent size for viewing.

Now, that's a bit big isn't it? So lets cut it down a bit, shall we.

What sorcery is this then? The address of this image is still http://files.myopera.com/Furie/files/steak1.JPG but now the dimensions have been cut down to 200 width and 150 height. So, how do we do this? Simple.

<img src="http://files.myopera.com/Furie/files/steak1.JPG">

is what I typed to display the first image and

<img src="http://files.myopera.com/Furie/files/steak1.JPG" width="200" height="150">

is what I used to display the second one. Spot the difference yet?

By adding the height and width commands into the image code I can control the maximum size that the image will display at. The numbers I enter into the quotes will be the maximum allowed dimension of the image for either the height or the width.

One thing to remember while trying this out is that the image will display wrong if you don't cut each parameter down by the same percentage. As an example, on the following version of the same photo I'll cut the width down to 400 but keep the height at 100.

<img src="http://files.myopera.com/Furie/files/steak1.JPG" width="400" height="100">

is what I typed to get that one. You can still just about tell what it is, but I like my meat a little thicker than that...

To fix it I've got to figure out what the height should be. Using the original image size of width 1600 and height 1200, I can see that I've taken the width down to a quarter of what it started out as because the current width is 400. But the height isn't enough, so I need to take the height down to a quarter of it's original starting value as well. Lets see... A quarter of 1200 is 300 so I should enter that in the height value instead of 100 as it currently is. My final code should therefore be

<img src="http://files.myopera.com/Furie/files/steak1.JPG" width="400" height="300">

And it works perfectly.

Hope this post was helpful to people.