HTML and CSS Reference
In-Depth Information
Sizing up your images
There's one last attribute of the
<img>
element you should know about—
actually, they're a pair of attributes:
width
and
height
. You can use these
attributes to tell the browser, up front, the size of an image in your page.
Here's how you use
width
and
height
:
<img src="images/drinks.gif" width="48" height="100">
The height at
tribute
tells the brow
ser how
tall the image
should
appear in the
page.
Both width and height are specified using the number of pixels. If
you're not familiar with pixels, we'll go into what they are in a little
more detail later in this chapter. You can add width and height
attributes to any image; if you don't, the browser will automatically
determine the size of the image before displaying it in the page.
Q:
Why would I ever use these
attributes if the browser just figures it out
anyway?
A:
On many browsers, if you supply the
width and height in your HTML, then the
browser can get a head start laying out the
page before displaying it. If you don't, the
browser often has to readjust the page
layout after it knows the size of an image.
Remember, the browser downloads images
after it downloads the HTML file and begins
to display the page. The browser can't know
the size of the images before it downloads
them unless you tell it.
Q:
We've said many times that we
are supposed to use HTML for structure,
and not for presentation. These feel like
presentation attributes. Am I wrong?
A:
It depends on how you are using these
attributes. If you're setting the image width
and height to the correct dimensions, then it
is really just informational. However, if you
are using the width and height to resize the
image in the browser, then you are using
these attributes for presentation. In that case,
it's probably better to consider using CSS to
achieve the same result.
to fit those dimensions. Many people do
this when they need to display an existing
image at a size that is larger or smaller than
its original dimensions. As you'll see later,
however, there are many reasons not to use
width and height for this purpose.
Q:
Do I have to use these attributes
in pairs? Can I just specify a width or a
height?
A:
You can, but if you're going to go to
the trouble to tell the browser one dimension,
supplying the second dimension is about the
same amount of work (and there isn't a lot
to be gained by supplying just a width or a
height unless you're scaling the image to a
particular width or height).
You can also supply width and height values
that are larger or smaller than the size of the
image and the browser will scale the image
