0

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.

Piotr
  • 1,597
  • 3
  • 18
  • 25

1 Answers1

0

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

Community
  • 1
  • 1
Thijs Dalhuijsen
  • 768
  • 6
  • 14
  • please have a look at http://sohist.com/5cm.html ... its 4.3cm on my macbook air in both Safari and Firefox on default zoom level. – Piotr Nov 28 '14 at 20:52
  • also - the example http://www.w3.org/Style/Examples/007/units.en.html - is actually < 2cm on my iPhone :( – Piotr Nov 28 '14 at 20:56
  • :-( Added an edit, and thanks, I learned something, maybe a detection method like http://stackoverflow.com/questions/9292156/how-to-detect-the-screen-dpi-using-php-or-javascript is possible? Added it to my original response... – Thijs Dalhuijsen Nov 28 '14 at 20:59