Image style

Sizes

Generally it is sufficient to specify only the width of an image, allowing the browser to calculate the height based on the source image. Otherwise, should someone replace the image with a better one that happens to have different proportions, the resulting image will appear squished or stretched to fit the original shape.

Images should never be given explict sizes in absolute units (e.g. pixels): in a large window they will look far too small, and in a small window too large.

Implicit Size

actual sizes

This image has no explicit sizes set, and so will always have the same pixel size as the source image. If someone replaces that image with one of a different resolution, the appearance of your web page might drastically change.

Absolute Size

absolute sizes

This image has an absolute size specified (width: 80px;), and will always appear the same size regardless of the size of the source. Unfortunately it will always have the same resolution regardless of how one views it. On a low-definition device it will appear huge, while on a high-definition device it will appear tiny.

Text-relative Size

text-relative sizes

This image has a text-relative size (width: 8em;). If you resize your text font size, this image will similarly change in size.

Page-relative Size

page-relative sizes

This image has a page-relative size (width: 33%;). As you resize your window wider or narrower, this image will grow or shrink to preserve its size relative to the window size (subject to max-width restrictions). This is especially useful when one wants to preserve the overall page layout on pages that might be viewed on a large range of devices.

Note that as always, these CSS styles work only if the HTML code in the body contains no formatting instructions. Of course no good HTML code ever would, as its purpose is strictly to describe the content, not the appearance.