HTML and CSS Reference
In-Depth Information
Here's an example
<img>
tag that uses the
height
and
width
attributes:
<img src=”my_image.png” height=”100” width=”200” />
To specify the height and width using CSS, use the height and width properties:
<img src=”my_image.png” style=”height: 100px; width: 100px” />
If you leave out either the height or the width, the browser will calculate that value based
on the value you provide for the other aspect. If you have an image that's 100 pixels by
100 pixels and you specify a height (using the attribute or CSS) of 200 pixels, the
browser will automatically scale the width to 200 pixels, as well, preserving the original
aspect ratio of the image. To change the aspect ratio of an image, you must specify both
the height and width.
9
More About Image Borders
You learned about the
border
attribute of the
<img>
tag as part of the section on links,
where setting
border
to a number or to
0
specified the width of the image border (or hid
it entirely).
By default, images that aren't inside links don't have borders. However, you can use the
border
attribute to include a border around any image, as follows:
<p>
<img src=”eggplant.gif” align=”left” style=”border: 5px solid black”>
This is an eggplant. We intend to stay a good ways away from it,
because we really don't like eggplant very much.
</p>
Figure 9.16 shows an image with a border around it.
FIGURE 9.16
An image border.
