Skip to main content

Examples of Image Sizing

Here are some examples of different image sizing combinations, designed to show you the different effects the sizing attributes can have:

An image of some flowers. The image is centered in the content area.

Attribute contentwidth = 400px. Sets the width of the image itself.

(The value could be 400 or 400px, as "px" is the default if no unit is set.)

An image of some flowers. The image is centered in the content area.

Attribute contentdepth = 400px. Sets the height of the image itself.

An image of some flowers. The image is centered in the content area.

Attribute width = 400px. Sets the width of the viewport of the image, which scales to fit to that area. (The border is not added normally, it is just added here to illustrate the viewport.)

This is the most commonly used attribute for image size.

An image of some flowers. The image is centered in the content area.

Attribute contentdepth = 400px, width = 420px. If the contentdepth or contentwidth is set, and a width or depth attribute is also set, with a higher value, it creates an area around the image.