With the proliferation of display devices, screens now come in a wide variety of sizes and aspect ratios. The image below illustrates the range of screens possible. Differing aspect ratios are shown on the diagonal lines with the ratio in circles towards the lower right.
Given the wide variation in screen resolution and size when we step from mobi to fondleslab to display to HDTV it is lunacy to specify screen position in term of pixels. There is no way to know what sized screen you are imaging to so it is best to reference screen sizes and positions in percentages instead. The resulting size is the percentage of the width (or height) of the enclosing container. This is most useful when specifying positions and sizes of tables and images. The HTML for the image above looks like:
<img src="http://upload.wikimedia.org/wikipedia/commons/4/44/Vector_Video_Standards5.svg" width="95%">
The
width="95%"
part sets the image width to 95% of the width of the enclosing container. We leave the height unspecified so that the computer will figure out the correct value so as not to distort the image. If you wish to distort the image you may specify a height as well.Things that are text related, such as the whitespace around a paragraph or header and text sizes are best specified in
em
. Oneem
was originally the width of an M in the current font. In a multi-lingual world where not all alphabets have an M in them, the meaning has evolved to mean the height of the current font. As the user changes the magnification on a page the size of anem
changes with it. This produces a pleasing scaled effect to the eye not possible when spacing objects in pixels.Other unit values available are
in
inch,cm
centimeter,mm
millimeter,ex
x-height of a font (x-height is usually about half the font-size),pt
point - 1/72 of an inch,pc
pica - 12 points andpx
pixels - a single dot on the screen. If no units are specified pixels are used by default. Best results across the broad spectrum of displays are achieved by exclusively using em and percent to specify size and distance. Try not to do anything else.
Any element (anything between tags) can be explicitly positioned by either putting it in a table or centering it <center></center> or aligning it to the right <p align="right">. Beyond that, explicit positioning is purposefully made as difficult as possible so that you won't do it. Your page will be displayed on a variety of devices of differing sizes and the less you constrain where the elements are positioned the better the general result will be across the broad spectrum of displays.Inside tables you can use the attribute
<td align="right"> ("left|right|center|justify|char")
are acceptable values. The "char" option is mishandled by all the major browsers so it doesn't see much use. Align can also be used with images and horizontal rule,<img src="http://mumble.com/image.jpg" align="right">
will work. So will<hr align="right">
This is all in the HTML 4.01 idiom that we are trying to make go away.To summarize, using HTML you can Center an element or put it in a table to control its position. This is why tables are wildly overused.
Thank you for providing the best method to format the size of images in a post. I will practice using it.