Attributes for <IMG ...>
WIDTH = "width expression"
HEIGHT = "height expression"
[
Are WIDTH and HEIGHT Required? ]
[
Not the Actual Dimensions ]
[
WIDTH and HEIGHT as Percentages ]
[
WIDTH or HEIGHT -- Not Both ]
WIDTH and HEIGHT tell the browser the dimensions of the image. The browser can use this information to reserve space for the image as it contructs the page, even though the image has not downloaded yet. For example, this tag tells the browser that the image is
105 pixels wide and
97 pixels tall.
| this code |
produces this |
<IMG SRC="starflower.gif" WIDTH=105 HEIGHT=97 ALT="Starflower">
|
 |
There is a common misperception that
WIDTH and
HEIGHT are required. In fact they are not. The
official specifications say nothing about them being required. Furthermore,
WIDTH and
HEIGHT detract from the appearance of the page in many situations.
The problem is that if the image is never downloaded (which is quite common -- many people
surf without images) then most browsers will still adhere to the dimension given in
WIDTH and
HEIGHT, even if these dimensions are too small to display the
ALT text. (Many web designers consider this a serious weakness.) If
WIDTH and
HEIGHT are not specified, the browser will render the images to fit the
ALT text. Compare these pictures of how Netscape renders a series of buttons which have the dimensions specified with how they are rendered without the dimensions specified:
- With
WIDTH and HEIGHT
- Without
WIDTH and HEIGHT
WIDTH and HEIGHT have their place. They are useful if the image is large and there is not much ALT text. To a great extent it's a judgement call -- either choice is technically valid.
WIDTH and
HEIGHT do not have to be the same dimensions as the actual picture. If you set different dimensions, the browser will attempt to shrink/stretch the picture to accomodate the dimensions. Some older browsers will not do this, others do it with varying degrees of success.
| this code |
produces this |
<IMG SRC="starflower.gif" WIDTH=200 HEIGHT=40 ALT="Starflower">
|
|
<IMG SRC="starflower.gif" WIDTH=65 HEIGHT=200 ALT="Starflower">
|
|
You can use percentages instead of pixel widths. Percentages are of the available width or height that the image could fill, usually the width or height of the current window. Percentages are useful for creating a "horizontal rule" effect. For example, we can use this image:
to create a rule the width of the page. We set the height to the image's natural height, and its width to 100%:
<IMG SRC="../graphics/forhr.gif" WIDTH="100%" HEIGHT=8 ALT="--------">
gives us this image:
When you create a psuedo-horizontal-rule this way, set the ALT text to several dashes, like this: ALT="---------". Also, when using percentages be sure to enclose the value in quotes -- unquoted attribute values cannot include the percent (%) character.
If HEIGHT is set to a percentage, common practice is for the browser to render it as a percentage of the height of the window (not the height of the full document). So, for example, this image is probably rendered on your browser as half as high as the window:
<IMG SRC="starflower.gif" WIDTH=105 HEIGHT="50%" ALT="Starflower">
gives us
It is not defined how a browser should behave if you specify only one of
WIDTH or
HEIGHT, but generally browsers will render the picture so that the ratio of height to width stays the same:
| this code |
produces this |
<IMG SRC="starflower.gif" WIDTH=30 ALT="Starflower">
|
|
<IMG SRC="starflower.gif" WIDTH=300 ALT="Starflower">
|
|
<IMG SRC="starflower.gif" HEIGHT=50 ALT="Starflower">
|
|
