How to display a "actual size" image?

displaying actual size of an image

[touchaponk]

I wanted to display the actual size of each products
(eg. if the product is 5 cm wide, it really appears 5cm wide on screen)
I know that the image is scalable at the client size but I just wanted the original size to display the actual size of the image.
I know one way which is using absolute unit in CSS but as I do some search many people say that absolute unit should be avoided due to various issues.
Anyone know any alternative way to display images in actual size?
Thx
Ps. the displaying thing will always be only at most 10cm in dimensions so screen size compatibility wouldnt be a problem.

[StoutFiles]

<img src="yourimage.gif"> would default to the actual size of the picture.

If you want to shrink or blow up the picture to a set width...

<img src="yourimage.gif" width="yourwidth">

Is this what you want?

[johnnie]

Don't pin me down on this one, but as far as I know its perfectly fine to use 'in', 'mm' and 'cm' as size qualifiers in your height and width properties (I know you can in CSS). Also, the 'pt' is defined as being 1/72 of an inch.

[edited by: johnnie at 10:55 am (utc) on Dec. 9, 2009]

[touchaponk]

that one would give me an actual pixel of the image
but since different screen have different pixel size and DPI, the image would appear in a different "actual size"
eg. 24" screen with 1920x1080 and 26" screen with 1920x1080...the image would definitely appear larger in the 30" screen
I wanted the image to appear as the same size in all screen (all 5 cm no matter how large the screen is)

[touchaponk]

@johnnie
I'm now experimenting on using absolute size on different screen and browser, but since i dont have 2 screens with different size and same resolution, it might be hard to prove that it's really working
thx

[swa66]

I don't think many, let alone most users actually set the DPI of their display into the OS. Hence the computer generally doesn't know the size and uses some horrible OS default.

In conclusion: unless you're going to instruct people to set this properly for all OSes out there and give them a way to verify the settings are correct. There's no way to do this.

Alternatives would be:
include a human hand or a ruler in the pictures.

[edit: fixed confusing typo]

[edited by: swa66 at 1:32 am (utc) on Dec. 10, 2009]

[johnnie]

Wouldn't the browser take the current screen DPI into account when rendering absolutely sized fonts? Anybody with a dual screen who can test?

[touchaponk]

I have a dual screen and I tried rendering image with 116mm in css,
it turns out to be exactly 116mm on my 24" with 1920x1080 resolution screen with google chrome and firefox (got around 105mm on IE8)
while it becomes only 105mm when I render it in my smaller 14.1" laptop screen
so I guess it's impossible to render a fixed actual size :(

[CSS_Kidd]

Swa is right. I tried the very same thing when working on a site for miniatures (doll house stuff). There is no way to present the absolute actual size of something by its self. Too many people have way too many different screen settings, resolutions and so on. We found the best, and the neatest way was to relate the items with common objects like quarters, pencils or a hand as swa suggested.

But then again... I have to ask... To where, in my case, it was important to display actual size of an object... Is it as necessary in your case?

[johnnie]

Thank you for that touchaponk. A valuable new lesson for me.

[touchaponk]

I'm buidling a website as a showcase of my products and I wanted the viewer to view what the actual size is so they know better how is it gonna be like when they actually buy it. I, for my self, found out sometimes order some product online and it turns out to be bigger or smaller than I expected.