HTML and CSS Reference
In-Depth Information
The smaller image downloads much faster than a full-scale one, and the
width and height attributes have Firefox, for example, create the desired
bright-red colored bar after the tiny image arrives at the browser ( Fig-
ure 5-18 ).
Figure 5-18. This colored horizontal bar was made from
a 1-pixel image
One last trick with the width attribute is to use a percentage value rather
than an absolute pixel value. This causes the browser to scale the im-
age to a percentage of the document window width. Thus, to create a
colored bar 20 pixels high and the width of the window, you could use:
<img src="pics/one-pixel.gif" width="100%" height=20>
As the document window changes size, the image will change size as
well.
If you provide a percentage width and omit the height , the browser will
retain the image's aspect ratio as it grows and shrinks. This means that
the height will always be in the correct proportion to the width, and the
image will display without distortion.
Search WWH ::




Custom Search