scaling an image on webpage to 1cm width across various mobile devices

Question

I am trying to scale an image on a mobile web page (packaged via cordova for Android/iOS) so it always has a known width in centimeters. Regardless of the screen resolution / size - I need the image to have a known width in centimeters. If I would be doing this 'the native way' I would check the screen ppi (points per inch) and then adjust image width in pixels accordingly.

I tried various solutions from stackoverflow but failed to find a solution.

Is developing a cordova plugin that would cover that on each platform separately is the only solution or this can be done via some javascript (or cordova) code.

Answer 1

You are not limited to pixels in CSS these days, check out http://www.w3.org/Style/Examples/007/units.en.html for reference, so aside from px, em, pt you can just use cm for centimeters, or in for inch.

SO, to answer your question, you can just do

<img src="someimg.png" style="width:1cm;" />

EDIT: when I open your testpage, on my system, it works like a charm. But yeah, in that case you will probably need to do some extra work, maybe detecting the DPI with a method like https://stackoverflow.com/questions/9292156/how-to-detect-the-screen-dpi-using-php-or-javascript can bridge the gap.

Good luck!

bovako