Resizing Images
It is always recommended to size your image to the
dimensions you require however, if not, you will need to resize images
contained within your documents to meet your specifications.
Image size is controlled by two attributes of the <IMG>
tag: HEIGHT and WIDTH. If the image you specified with the SRC attribute
does not match these sizes, it will be stretched or shrunk to fit.
To see the effects on this image, we are going to use this
sample width="111" height="100":
To change this images width: width="111"
height="100"
you could add width="200" height="189" to the <IMG>
tag and get:
We can also make it smaller by setting HEIGHT and WIDTH to 80:
Right away, you can see the downside of image resizing:
Depending on your browser, you may notice jagged edges in the color blocks
in the larger image, and missing pixels in the smaller image. This way of
resizing is not appropriate unless you absolutely have to. The best way to
create the desired effects of an image is to resize with an image editor
such as Photoshop.
Scaling images using percentages
The last kind of image scaling involves resizing the image
to match the current area text size. If you provide a percentage value to
the WIDTH attribute, the browser will scale the image so that it's width
matches that percentage of the text flow width. For example, using
WIDTH="35%" creates an image that is scaled accordingly:
|
Final Host, is a definitive
choice as a "Web Hosting Service Provider". The right
choice for you if you are in the process of establishing,
maintaining or transferring a website's presence on the
internet. Our outstanding marketing knowledge, technical
expertise and quality services offers our virtual-citizens a
unique opportunity on the internet's road to Success !
The web hosting industry so far,
barely scratches the surface when it comes to establishing and
marketing a website's presence on the WWW. That is why Final
Host is here, not only to provide you with the disk space and
technical services you need but to supply you with advantages to
succeed !
|
*Of course you can mix and match these to build
different effects
using percentages expanding and shrinking your height
and width attributes in the same manner as above.
*Keep in mind when applying
percentages: The HEIGHT attribute to a percentage value doesn't make much
sense. HTML documents tend to have a variable length. Browser behavior
varies when you do this; most use the height of the current window as the
base value when computing a percentage height.
All sorts of image effects are possible with image sizing
and scaling. But as stated our recommendation it is always wise to begin
with the size of picture you wish displayed to control the effects on the
image.
Index: Website Creation
Resource Guide To - Designing & Maintaining Your
Website
Index
1: About Image Attributes / Image Galleries