web page - image size in milimeters [duplicate]

StackOverflow https://stackoverflow.com/questions/20777388

Question

Every product in my eshop must be displayed in it's real life size (cm or mm) independent on the resolution my visitor is using to view it.

I'm searching for a solution that works on all browsers.

How can this be done?

How well do mm and cm measurements in css work?

Was it helpful?

Solution

As far as I know, in css you can use cm, mm and in as units for any property that takes a length value, so

height: 100cm;

Will set an element's height to 100cm as measured on screen. However, for a quick test I created a webpage containing the following:

<div style="height: 10cm; width: 10cm; background-color: red">

This div appeared 10cm on one monitor, 8.9cm on another, 6.35cm on a tablet and either 2.05cm or 3.3cm on my phone depending on the orientation. So while you can set absolute lengths in CSS, there really is no guarantee that is what you are going to get. Unfortunately I don't think there are any more accurate alternatives either, although you could always try slaughtering a goat to improve your chances.

the spec

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top