Images

Other Image Attributes

The width and height attributes

Try It: Try playing with the width and height of your image.

These attributes let you set the height and width of your image in pixels. You can specify just width, just height, or both. If you just specify width, for example, the image is displayed with a proportional height, that is, it is not squished or stretched. If you set the width and the height, you can squish or stretch your images into different rectangular shapes.


	    <img 
	    src="flower.gif"
	    width="40" />

is displayed as:


	    <img 
	    src="flower.gif"
		height="25"
	    width="40" />

is displayed as:

Tip: You can specify the width of an image as a percentage of the space available.

Try It: Set the width of an image using a percentage and resize your browser window.

For the width attribute, you can also use percentages, where 100% is the total space available. So, if you wanted an image to be one quarter the width of the window, you could set width to 25% (one quarter of 100% is 25%). The height will be in proportion to the width if you do not set it as well.


	    <img 
	    src="flower.gif"
	    width="20%" />

is displayed as:

Width and size for horizontal rules

Try It: Try playing with the width and size of a horizontal rule.

You can also use the width attribute for horizontal rules in just the same way as you do for images. However, instead of using height, you must use the size attribute and specify the height of the rule in pixels (the default is often 3).

Prev Next