|
Okay, you have an image you want to use, but
it's just not the right size to go where you want it to go.
Maybe the image
takes up the whole screen, or maybe you wanted a larger version
of the image on the screen. Well, you can resize the image by
adding width and height commands to your image tag. Let's take
a look at an example. I have an image called "next.jpg". Well,
suppose I want to make it smaller. All I need to do is know the
original width and height of my image. The width and height are
usually written in pixels. A typical screen is about 800 pixels
wide and 600 pixels in height (though this varies with different
video cards and monitors). My image turns out to be 106 pixels
wide and 65 pixels in height. The picture looks like this:
So, to change the size of the image, I'm going to add these
two commands inside the image tag:
width=" " and
height=" "
I'm going to place the commands after the initial
command, IMG SRC="next.jpg". The tag will now look like this:
<IMG SRC="next.jpg" width=" " height=" ">
Now, to make the image smaller, I'm going to place numbers
inside those quotation marks. Well, let's say I wanted it to
be 75 pixels wide and 40 pixels high. I would then place these
numbers into the commands, like this:
<IMG SRC="next.jpg" width="75" height="40">
Now, when I reload my page, the picture will be the new height
and width I specified. Here's what it would look like:
Now, to make the image larger, we will just insert larger numbers
for the width and height:
<IMG SRC="next.jpg" width="300" height="200">
Now the image looks like this:
As you can see, the images became somewhat distorted when I
resized them. One reason for this is that I didn't keep the aspect
ratio the same. Since the image was originally 106x65, I would
have to decide on a width, and then find a height that would
keep the aspect ratio of 106/65. When you calculate 106/65, you
get about 1.63 . So, if you want to make the width 75, you need
to find the height that will make the ratio as close as possible
to 1.63 . You can guess at it for awhile, or if you like solving
equations, here it is:
75/height = 1.63
Now take the answer and round up or down. In this case, it
comes out to about 46.0123 . So, I would use 46 as the height:
<IMG SRC="next.jpg" width="75" height="46">
Now it looks like this:
If you don't want to deal with math all the time
(like me), you can also resize it with a paint or image program
(which will
do the calculations for you) and upload the new version of the
picture to your server. I usually use my image program to do
this, just for the ease of use. Besides, if I'm making the image
smaller, the paint program will make the file size smaller.
|