HTML and CSS Reference
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.
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
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:
<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.
Figure 9.16 shows an image with a border around it.
An image border.